Looking to create a design similar to the following:
A main container with 'n' child elements that may extend beyond the width of the window, causing the page to scroll horizontally instead of wrapping to the next line.
This main container will be replicated multiple times in a vertical layout.
The scrolling functionality should apply to the entire page, meaning the scroll bar should appear at the outermost wrapper level (a div with class
.overflow) rather than on each individual parent container.
To see this behavior in action, try scrolling horizontally within the code snippet below.
.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>An issue arises where the grey background of the parent container does not extend behind its children when they exceed the window's width.
How can we achieve this (having the background of the .parent div overflow for all its children) while still utilizing flex-box?