Переполнение фона за пределами ширины окна

Question

Мне нужно спроектировать что-то вроде следующего:

• Родительский контейнер с 'n' дочерними элементами, который может очень хорошо выходить за пределы ширины окна, и в этом случае страница должна прокручиваться, а не переноситьсяна следующую строку.

• Приведенный выше контейнер будет отображаться несколько раз под друг другом.

• Страница должна прокручиваться целиком, т.е. прокручиватьсядолжен быть на уровне оболочки (div с классом .overflow), а не на уровне отдельного родителя.

Прокрутите горизонтально во фрагменте ниже, чтобы увидеть поведение.

.overflow {
  overflow-x: auto;
}

.parent {
  background: #ccc;
  border: 4px solid blue;
  display: flex;
  margin: 10px 0;
}

.child {
  display: inline-flex;
  height: 50px;
  background: white;
  margin: 10px;
  flex: 1 0 300px;
  border: 2px solid red;
}

<div class="overflow">
  <div class="parent">
    <div class="child">
      1
    </div>
    <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
  </div>
  <div class="parent">
    <div class="child">
      1
    </div>
    <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
  </div>
</div>

Теперь проблема в том, что серый фон на родительском элементе не переполняется за дочерними элементами за пределами ширины окна.

Как этого добиться (сделать .parent div переполнением фона для всех его дочерних элементов) и, возможно, с сохранением flex-box?

Answer 1

Используйте inline-flex для родителя и замените flex-basis на width

.overflow {
  overflow-x: auto;
}

.parent {
  background: #ccc;
  border: 4px solid blue;
  display: inline-flex;
  min-width:100%; /*To keep the block behavior*/
  box-sizing:border-box;
  margin: 10px 0;
}

.child {
  display: inline-flex;
  height: 50px;
  background: white;
  margin: 10px;
  width:300px;
  flex-shrink:0;
  flex-grow:1;
  border: 2px solid red;
}

<div class="overflow">
  <div class="parent">
    <div class="child">
      1
    </div>
    <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
  </div>
  <div class="parent">
    <div class="child">
      1
    </div>
    <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
  </div>
</div>

Answer 2

Удалить переполнение div

Измените родительский класс css на

.parent {
  overflow-x: auto;
  background: #ccc;
  border: 4px solid blue;
  display: flex;
  margin: 10px 0;
}