I have been struggling to find a solution to fix the header in a flex div and allow the rest of the content to scroll if needed. This issue has come up multiple times, especially when working with tables that have a fixed header and scrollable content. I have seen a lot of messy jQuery solutions, but I believe flex could be the answer. I would appreciate any help in getting it right.
body {padding: 0; margin: 0;}
p {margin-bottom: 17px;}
.wrapper {width: 100%; height: 200px; margin: 0 auto; border: 1px solid #000; box-sizing: border-box;}
.flexContainer {display: flex; flex-wrap: nowrap; justify-content: space-between ; flex-direction: row; align-items: stretch; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #f00;}
.firstCol {width: 32%; box-sizing: border-box; order: 1; border: 1px solid #f00;}
.secondCol {width: 32%; box-sizing: border-box; order: 2; border: 1px solid #0f0; box-sizing: border-box; overflow: auto;}
.secondCol .innerFlex {height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; width: 100%; box-sizing: border-box; flex: auto; overflow: hidden;}
.secondCol .innerFlex .innerFlexContainer {}
.secondCol .innerFlex .firstItem {border: 1px solid #00f; width: 100%; order: 1; flex-grow: 0;}
.secondCol .innerFlex .secondItem {border: 1px solid #00f; width: 100%; aling-self: flex-end; box-sizing: border-box; display: block; order: 2; flex-grow: 1; overflow: scroll;}
.thirdCol {width: 32%; box-sizing: border-box; order: 3; border: 1px solid #f0f; box-sizing: border-box;}<div class="wrapper">
<div class="flexContainer">
<div class="firstCol">
<img src="http://vaso.hu/venus.jpg" style="width: 100%;" alt="">
</div>
<div class="secondCol">
<div class="innerFlex">
<div class="innerFlexContainer">
<div class="firstItem">
This is the header that needs to stay fixed and visible at all times.
</div>
<div class="secondItem">
123456<br>
123456<br>
123456<br>
123456<br>
123456<br>
123456<br>
123456<br>
123456<br>
123456<br>
123456<br>
123456<br>
123456<br>
</div>
</div>
</div>
</div>
<div class="thirdCol">
789
</div>
</div>
<!-- /big and first flex container -->
</div>Fiddle: https://jsfiddle.net/w8pe0j00/6/