Scrolling a flexbox with overflowing content
Working with position:absolute; along with flex:
Position the flex item with position: relative. Then inside of it, add another <div> element with:
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
This extends the element to the boundaries of its relative-positioned parent, but does not allow to extend it. Inside, overflow: auto; will then work as expected.
.all-0 {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
p {
text-align: justify;
}
.bottom-0 {
bottom: 0;
}
.overflow-auto {
overflow: auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-5 w-100">
<div class="row bg-dark m-0">
<div class="col-sm-9 p-0 d-flex flex-wrap">
<!-- LEFT-SIDE - ROW-1 -->
<div class="row m-0 p-0">
<!-- CARD 1 -->
<div class="col-md-8 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/700x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
<!-- CARD 2 -->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
</div>
<div class="row m-0">
<!-- CARD 3 -->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
<!-- CARD 4 -->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
<!-- CARD 5-->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
</div>
</div>
<div class="col-sm-3 p-0">
<div class="bg-white m-2 p-2 position-absolute all-0 d-flex flex-column">
<h4>Social Sidebar...</h4>
<hr />
<div class="d-flex overflow-auto">
<p>
Topping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut
sweet tart. opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate
bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar.
Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake
ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Topping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut
sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate
bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar.
Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake
ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple
pie apple pie. Halva
</div>
</div>
</div>
</div>End result: 
CodePen Link
The following CSS changes in bold (plus a bunch of content in the columns to test scrolling) will work. Well, it makes each content column individually scrollable, which may be more (better?) than originally requested. Anyway, see the result in this Pen.
.content { flex: 1; display: flex; height: 1px; }
.column { padding: 20px; border-right: 1px solid #999; overflow: auto; }
The trick here seems to be that a scrollable panel needs to have a height literally set somewhere (in this case, via its parent), not just determined by flexbox. So even height: 1px works. The flex-grow:1 will still size the panel to fit properly.
I've spoken to Tab Atkins (author of the flexbox spec) about this, and this is what we came up with:
HTML:
<div class="content">
<div class="box">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>
CSS:
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
display: flex;
min-height: min-content; /* needs vendor prefixes */
}
Here are the pens:
- Short columns being stretched.
- Longer columns overflowing and scrolling.
The reason this works is because align-items: stretch doesn't shrink its items if they have an intrinsic height, which is accomplished here by min-content.
I just solved this problem very elegantly after a lot of trial and error.
Check out my blog post: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
Basically, to make a flexbox cell scrollable, you have to make all its parents overflow: hidden;, or it will just ignore your overflow settings and make the parent larger instead.