Getting flex items to horizontal scroll in flex container - html

Question

I'm trying to implement horizontal scrolling of fixed width images which are wrapped in divs. The entire layout is wrapped in flex with a left right layout.
However, I'm not able to keep the parent width of the boxes from overflowing. I need the children boxes to scroll horizontally and its parent contained in a flex.
Link to fiddle: https://jsfiddle.net/wn8zd2t6/43/
.dash {
display:flex;
width:100%;
}
.left {
width: 380px;
height: 100vh;
}
.right {
flex: 1 1 0%;
display:flex;
flex-direction: column;
}
.b {
border:1px solid black;
}
.ig {
display:inline-block;
height:100px;
width:180px;
object-fit: cover;
}
.scrollable {
white-space: nowrap;
overflow-x:scroll;
}
.box {
display: inline-block;
}
<div class="dash">
<div class="left b">
left
</div>
<div class="right b">
<div>
top section
</div>
<div class="container">
<!-- necessary -->
<div>
scrollable section title
</div>
<!-- need this to be scroll -->
<div class="scrollable">
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

The flex-basis: 0% isn't enough to define a fixed width on the images container, therefore the overflow function doesn't have a break point.
Instead of flex: 1 1 0% use width: calc(100% - 380px) (the 380px being the fixed width of the other column).
This is all you need:
.right {
/* flex: 1 1 0%; */
width: calc(100% - 380px); /* new */
}
revised jsfiddle
.dash {
display: flex;
width: 100%;
}
.left {
width: 380px;
height: 100vh;
}
.right {
/* flex: 1 1 0%; */
width: calc(100% - 380px); /* new */
display: flex;
flex-direction: column;
}
.b {
border: 1px solid black;
}
.ig {
display: inline-block;
height: 100px;
width: 180px;
object-fit: cover;
}
.scrollable {
white-space: nowrap;
overflow-x: scroll;
}
.box {
display: inline-block;
}
<div class="dash">
<div class="left b">
left
</div>
<div class="right b">
<div>
top section
</div>
<div class="container">
<!-- necessary -->
<div>
scrollable section title
</div>
<!-- need this to be scroll -->
<div class="scrollable">
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

I simplified your flex code into the following. I added border styling to the image divs for visual clarity of what's going on.
It's important to remember that to constrain a child element's width to a parent with flex view, the parent flex container must have a constraint on it's width, even if it's width: 100%;
You can see this within the .right class and that controls how the rest of that column's children behave with their flex-grow.
/* Utility */
.border-settings {
border: 1px solid black;
}
.scrollable {
display: flex;
flex-direction: row;
overflow-x: scroll;
padding: 10px;
}
/* Container Settings */
.dashboard {
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
}
.left {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.right {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
max-width: 50%;
}
.container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card {
margin: 10px;
padding: 10px;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 10px;
}
/* Element Settings */
img {
height: 100px;
width: 180px;
}
<div class="dashboard">
<div class="left border-settings">
left Section
</div>
<div class="right border-settings">
<div class="top">
top section
</div>
<div class="container">
<!-- necessary -->
<div>
scrollable section title
</div>
<!-- need this to be scroll -->
<div class="scrollable">
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
</div>
</div>
</div>
</div>