Specify min-width in a flexbox layout - css

Question

I have the following layout which is based on Bootstrap's Flexbox:
<div class="d-flex flex-row">
<section class="left"></section>
<section class="center"></section>
<section class="right"></section>
</div>
And the CSS of this:
.left {
flex: 0 0 360px;
}
.right {
flex: 0 0 400px;
}
.center {
flex: 1;
}
So, with this layout I have 2 left and right columns which have fixed width and a fluid center column. I'm wondering if there's a way to specify a min-width to the center container so it gets a horizontal scrollbar when the the min-width is reached because of small browser width.
Thanks!

Answer 1

You can use min-width in a flex item to define the minimum width flex-shrink will apply. With overflow-x you define how is their behavior when a child node overflows its content width.
EDIT #1
As stated by Michael_B, you can use a built-in flexbox solution making min-width unnecessary. The solution is to set flex-grow: 1;, flex-shrink: 0; and flex-basis: 100px; /* Or any value you want */. The short hand for this 3 properties is flex: 1 0 100px;.
section {
border: 1px solid black;
}
.left {
flex: 0 0 360px;
}
.right {
flex: 0 0 400px;
}
.center {
flex: 1 0 100px;
white-space: nowrap;
overflow-x: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row">
<section class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</div>

Answer 2

Just add the following style properties to the .center element:
.center {
flex: 1 1 auto;
min-width: 100px; /* Set value to whatever you want */
overflow: auto;
}
Stackblitz Example