Here's a flexbox challenge that I can't seem to find a solution for.
Using BS4 alpha 6 flexbox utils, I'm trying to make a full-height layout with a main content area, and sidebar that scroll independently. On the main left side there is to be a stick-to-bottom footer (that pushes down when the content is higher than 100%). Additionally, the main content area itself has a stick-to-bottom footer. I'm using flex-grow:1 for the sticky footers.
<div class="container-fluid">
<div class="wrapper row">
<div class="col-9 inner d-flex flex-column justify-content-between">
<div class="main bg-info p-3 d-flex flex-column justify-content-between">
<div class="p-3">
<h3>Main content area</h3>
</div>
<div class="bg-faded p-3">inner footer</div>
</div>
<footer class="bg-inverse text-white p-3">footer</footer>
</div>
<div class="col-3 bg-faded p-3 sidebar">
<h3>Sidebar</h3>
</div>
</div>
</div>
So far so good...
Problem when content is taller...
To resolve this problem, I can remove display:flex from the inner container, but then the inner footer is longer pushed to the bottom:
No sticky footer w/o display:flex on inner
https://codeply.com/go/2vnNsK0PZ6
I can also set max-height and overflow-y:auto on the inner content area which works but causes a scroll only on the inner area. I want the entire left side to scroll instead.
So, the question is, how can a make a full height layout with separate scrolling sides and multiple sticky footers that "push" down as needed.
One more caveat is that the inner footer must remain inside the .main div.
https://codeply.com/go/2vnNsK0PZ6
Edit: This question is similar except the scrolling is only in the innermost div. When that innermost div gets squished I want it to push everything down, and then the outer div to scroll.
Solved with flex:1 0 auto instead of flex-grow:1
