I've been working on a Flexbox layout (using Bootstrap 4) even though I should probably be using CSS Grid at this point. I had it working great in Chrome/FF/Edge until I added 1 more level of nesting, which then throws off the height: 100% calculation only in Firefox and Edge (which is basically just an older version of Chrome now).
I was under the impression as long as the parents are display: flex and height: 100% that I could rely on the child height being calculated correctly (meaning 100% of the remaining flexible height).
This variation works:
- https://jsfiddle.net/langdonx/cLpj0d1y/5/
<!-- good --> <div class="d-flex flex-column h-100" style="overflow: auto;"> <div> content here </div> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9 </div>
This variation spills over into the body, exposing scrollbars:
- https://jsfiddle.net/langdonx/cLpj0d1y/6/
<!-- bad --> <div class="d-flex flex-column h-100"> <div class="h-100" style="overflow: auto;"> <div> content here </div> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9 </div> </div>
See the <!-- good --> vs <!- bad --> HTML blocks.
Am I missing something simple or is this a bug or limitation in Flexbox with Firefox/Edge?
I'm using more elements than necessary, but need to because I'm using AngularJS components.
