Overflow background beyond window's width

Question

I have to design something like below:

• A parent container with 'n' childs that may very well go beyond the window's width and in that case page should scroll and not wrap to next line.

• The above container will be rendered multiple times below one another.

• The page should scroll as a whole, i.e. scroll should be at a wrapper (div with class .overflow) level and not at individual parent level.

Scroll horizontally in the snippet below to see the behavior.

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

The issue now is that the grey background on parent is not overflowing behind the children beyond the window's width.

How to achieve this (make .parent div background overflow for all its children) and possibly with retaining the flex-box?

Answer 1

Use inline-flex for parent and replace flex-basis by 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

Remove overflow div

Change your parent class css to

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