Не работает горизонтальный скролл

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

.wrapper{
    width: 100%;
    display: flex;
    overflow-y:hidden;
    overflow-x:scroll;
    white-space: nowrap;
}
.wrapper .item{
    display: inline-block;
    border: 10px solid white;
    width: 600px;
    height: 300px;
    line-height: 110px;
    text-align: center;
    background-color: rebeccapurple;
}
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Не работает что посоветуйте ?

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

Ответы

▲ 0Принят

Посоветую в блоки item вставить контент что-бы они не сжимались. Или как я вставил паддинги которые не дают сжиматься бокам.

.wrapper{
    width: 100%;
    display: flex;
    overflow-y:hidden;
    overflow-x:scroll;
    white-space: nowrap;
}
.wrapper .item{
    display: inline-block;
    border: 10px solid white;
    width: 600px;
    height: 300px;
    line-height: 110px;
    text-align: center;
    background-color: rebeccapurple;
    padding: 200px;
}
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>