The usage of Overflow Scrolling On CSS Flexbox Panels


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:

Side-by-side CSS Flexbox panels using overflow scrolling.

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.



0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Back To Top
0
Would love your thoughts, please comment.x
()
x