Блоки уменьшили свою ширину при overflow-x: scroll display flex

Рейтинг: 0Ответов: 1Опубликовано: 08.03.2023

Хотел реализовать горизонтальный скролл для дочерних элементов , которые находятся в контейнере , повесил overflow-x и display flex на контейнер и дочерние блоки решили уменьшить свою ширину , как сделать так , чтобы дочерние элементы не сужались а были той шириной что указана ?

.realtor {
   width: 1588px;
   height: 840px;
   background: #000;  
}        
.cards {
width: 100%;
height: 702px;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
}
.card {
width: 400px;
height: 672px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.12);
margin-right: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="realtor">
     <div class="cards">
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
     </div>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Для айтемов (.card) дайте flex-shrink: 0, это запретит им сжиматься.

.realtor {
  width: 1588px;
  height: 840px;
  background: #000;
}

.cards {
  width: 100%;
  height: 702px;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
}

.card {
  flex-shrink: 0; /* added */

  width: 400px;
  height: 672px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.12);
  margin-right: 20px;
}
<div class="realtor">
  <div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>