[ad_1]
I am a massive fan of CSS Flexbox. As any person who had (?has?) to give a boost to IE11 up till the very finish, CSS Flexbox turned into my go-to for complicated layouts. Alternatively, even with years of Flexbox enjoy underneath my belt, I am not all the time assured that I perceive precisely how it’s going to behave when it incorporates overflowing content material. One situation wherein I have been the use of Flexbox not too long ago is to create a dynamic set of “panels”. Imagine a suite of side-by-side panels wherein one panel is dynamically added or got rid of to and from the DOM (File Object Fashion), respectively. Is it secure to use overflow:auto to those CSS Flexbox panels?
Run this demo in my JavaScript Demos venture on GitHub.
View this code in my JavaScript Demos venture on GitHub.
With side-by-side panels, I need Flexbox to create and care for the format, regardless of what’s if truth be told occurring within the panels. This means that, I need the Flexbox panels to care for their integrity even though the content material within the panels forces each vertical (not unusual) and horizontal (unusual) scrolling.
To check this, I am making a panel-set with place:mounted this is designed to absorb all the visible area of the browser. With four-sided positioning, that is somewhat instantly ahead:
<div elegance="panels">
<major elegance="panels__main">
... plenty of content material ...
</major>
<apart elegance="panels__aside">
... plenty of content material ...
</apart>
</div>
The “major” panel will probably be set to develop, flex-grow:1, whilst the “apart” panel will probably be given an particular width and feature flex-grow:0. Each panels will probably be given overflow:auto such that after there may be a large number of content material, scrollbars will probably be rendered – or, a minimum of, that is the hope.
Here is the entire code for my demo – with a purpose to stay the code extra concise, I am the use of JavaScript to clone <template> parts and inject them into the DOM:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta title="viewport" content material="width=device-width, initial-scale=1" />
<hyperlink rel="stylesheet" kind="textual content/css" href="https://www.bennadel.com/weblog/./major.css" />
<taste kind="textual content/css">
.panels {
backside: 0px ;
show: flex ;
left: 0px ;
place: mounted ;
proper: 0px ;
most sensible: 0px ;
z-index: 1 ;
}
.panels__main {
flex: 1 1 auto ;
}
.panels__aside {
border-left: 4px forged #cccccc ;
flex: 0 0 auto ;
width: 400px ;
}
/*
Sanity test that flex "panels" will scroll correctly when they have got
overflow:auto carried out to them. And, would possibly not simply develop in ordinary tactics once they
have an excessive amount of content material.
*/
.panels__main,
.panels__aside {
overflow: auto ;
overscroll-behavior: include ;
/*
Now not all browsers observe padding persistently when horizontal scrolling is
provide. However, I do not truly care about that for this publish.
*/
padding: 20px 20px 20px 20px ;
}
.large-marge {
background-color: pink ;
top: 10px ;
margin: 16px 0px 16px 0px ;
width: 3000px ;
}
</taste>
</head>
<frame>
<div elegance="panels">
<major elegance="panels__main">
<h1>
Sanity Take a look at: The usage of Overflow Scrolling On CSS Flexbox Panels
</h1>
<!-- To power vertical scrolling. -->
<template elegance="lots-o-content">
<p> This will probably be duplicated lots-o-times! </p>
</template>
<!-- To power horizontal scrolling. -->
<div elegance="large-marge"></div>
</major>
<apart elegance="panels__aside">
<h2>
Sidebar
</h2>
<!-- To power vertical scrolling. -->
<template elegance="lots-o-content">
<p> This will probably be duplicated lots-o-times! </p>
</template>
<!-- To power horizontal scrolling. -->
<div elegance="large-marge"></div>
</apart>
</div>
<!-- ---------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------- -->
<!-- Fleshing out the vertical scrolling content material. -->
<script kind="textual content/javascript">
for ( var template of file.querySelectorAll( ".lots-o-content" ) ) {
for ( var i = 1 ; i <= 40 ; i++ ) {
template.after( template.content material.cloneNode( true ) );
}
}
</script>
</frame>
</html>
As you’ll see, each the “major” and “apart” panels have overflow:auto with lots-o-content. And, after we pass to run this within the browser, we get the next output:
Woot woot! This works precisely as I was hoping it could paintings! And, it really works the similar in Chrome, Safari, Firefox, and Edge! I not have a Digital System working IE11, so I will be able to’t check that. However, I am hoping nobody with IE11 remains to be having access to my programs anyway.
Need to use code from this publish?
Take a look at the license.
[ad_2]
