0

.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>

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

1 ответ 1

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>

1
  • Спосибо большое выручили :)))))
    – White Moon
    25 янв 2023 в 16:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.