Sanity Check: Using Overflow Scrolling On CSS Flexbox Panels
I'm a huge fan of CSS Flexbox. As someone who had (?has?) to support IE11 up until the very end, CSS Flexbox became my go-to for complex layouts. However, even with years of Flexbox experience under my belt, I'm not always confident that I understand exactly how it will behave when it contains overflowing content. One scenario in which I've been using Flexbox recently is to create a dynamic set of "panels". Consider a set of side-by-side panels in which one panel is dynamically added or removed to and from the DOM (Document Object Model), respectively. Is it safe to apply overflow:auto to these CSS Flexbox panels?
Run this demo in my JavaScript Demos project on GitHub.
View this code in my JavaScript Demos project on GitHub.
With side-by-side panels, I want Flexbox to create and maintain the layout, irrespective of what is actually going on inside the panels. Which means, I want the Flexbox panels to maintain their integrity even if the content inside the panels forces both vertical (common) and horizontal (uncommon) scrolling.
To test this, I'm creating a panel-set with position:fixed that is designed to take up the entire visual space of the browser. With four-sided positioning, this is quite straight forward:
| <div class="panels"> | |
| <main class="panels__main"> | |
| ... lots of content ... | |
| </main> | |
| <aside class="panels__aside"> | |
| ... lots of content ... | |
| </aside> | |
| </div> |
The "main" panel will be set to grow, flex-grow:1, while the "aside" panel will be given an explicit width and have flex-grow:0. Both panels will be given overflow:auto such that when there is a lot of content, scrollbars will be rendered - or, at least, that's the hope.
Here's the full code for my demo - in order to keep the code more concise, I'm using JavaScript to clone <template> elements and inject them into the DOM:
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" type="text/css" href="./main.css" /> | |
| <style type="text/css"> | |
| .panels { | |
| bottom: 0px ; | |
| display: flex ; | |
| left: 0px ; | |
| position: fixed ; | |
| right: 0px ; | |
| top: 0px ; | |
| z-index: 1 ; | |
| } | |
| .panels__main { | |
| flex: 1 1 auto ; | |
| } | |
| .panels__aside { | |
| border-left: 4px solid #cccccc ; | |
| flex: 0 0 auto ; | |
| width: 400px ; | |
| } | |
| /* | |
| Sanity check that flex "panels" will scroll properly when they have | |
| overflow:auto applied to them. And, won't just grow in strange ways when they | |
| have too much content. | |
| */ | |
| .panels__main, | |
| .panels__aside { | |
| overflow: auto ; | |
| overscroll-behavior: contain ; | |
| /* | |
| Not all browsers apply padding consistently when horizontal scrolling is | |
| present. But, I don't really care about that for this post. | |
| */ | |
| padding: 20px 20px 20px 20px ; | |
| } | |
| .large-marge { | |
| background-color: red ; | |
| height: 10px ; | |
| margin: 16px 0px 16px 0px ; | |
| width: 3000px ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="panels"> | |
| <main class="panels__main"> | |
| <h1> | |
| Sanity Check: Using Overflow Scrolling On CSS Flexbox Panels | |
| </h1> | |
| <!-- To force vertical scrolling. --> | |
| <template class="lots-o-content"> | |
| <p> This will be duplicated lots-o-times! </p> | |
| </template> | |
| <!-- To force horizontal scrolling. --> | |
| <div class="large-marge"></div> | |
| </main> | |
| <aside class="panels__aside"> | |
| <h2> | |
| Sidebar | |
| </h2> | |
| <!-- To force vertical scrolling. --> | |
| <template class="lots-o-content"> | |
| <p> This will be duplicated lots-o-times! </p> | |
| </template> | |
| <!-- To force horizontal scrolling. --> | |
| <div class="large-marge"></div> | |
| </aside> | |
| </div> | |
| <!-- ---------------------------------------------------------------------------- --> | |
| <!-- ---------------------------------------------------------------------------- --> | |
| <!-- Fleshing out the vertical scrolling content. --> | |
| <script type="text/javascript"> | |
| for ( var template of document.querySelectorAll( ".lots-o-content" ) ) { | |
| for ( var i = 1 ; i <= 40 ; i++ ) { | |
| template.after( template.content.cloneNode( true ) ); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
As you can see, both the "main" and "aside" panels have overflow:auto with lots-o-content. And, when we go to run this in the browser, we get the following output:
Woot woot! This works exactly as I hoped it would work! And, it works the same in Chrome, Safari, Firefox, and Edge! I no longer have a Virtual Machine running IE11, so I can't test that. But, I'm hoping no one with IE11 is still accessing my applications anyway.
Want to use code from this post? Check out the license.
Reader Comments
Post A Comment — ❤️ I'd Love To Hear From You! ❤️