Скрытие div в переполнении родителя?

Question

У меня есть родительский держатель с overflow:hidden;, внутри у меня есть блоки, я хочу "спрятать" некоторые из них в переполнении родителя.

Например:

...| from here these are hidden off page

[ ] [ ] [ ] [ ] [ ]

Выше я просто хочу, чтобы первый блок был на экране, а остальные - в скрытом переполнении.

Я пытался использовать:

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent {
    display: flex;
    overflow: hidden
}
.child {
    width: 100%;
}

Но дети просто собираются и остаются на экране.

Answer 1

Вам нужно установить ширину для родителя (видимая ширина) и добавить в него обертку с большей шириной (видимая + скрытая ширина) ... попробуйте это:

* {
  box-sizing: border-box;
}
.parent {
  width: 200px;
  height: 200px;
  padding: 20px;
  overflow-x: auto;
  background: grey;
}
.container {
  width: calc(3 * (200px - 20px));
  height: 100%;
  display: flex;
}
.child {
  width: calc(200px - 2 * 20px);
  margin-right: 20px;
  height: 100%;
  background: tomato;
}

<div class="parent">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 2

Контейнер не будет переполнен, если не будет каких-то ограничений на его размеры.Попробуйте установить свойство max-height или max-width.

.parent
{
    max-height: 30em; /* replace with the expected height of .child */
    max-width: 30em; /* or max-width if you're trying to get horizontal overflow */
}

Кроме того, почему для .parent установлено значение display: flex?Без других настроек это просто заставит всех его дочерних элементов отображаться рядом и разделит горизонтальное пространство.

Если вы хотите, чтобы дети могли переполняться, удалите это.