olop01 olop01 - 15 days ago 4
CSS Question

100% height overflows my flex layout

I created a somewhat holy grail layout with flex box. This works completely like it should without any scrollbars - until I insert the Quill text editor into my content_wrapper container. In this container there is the top toolbar and also a main div for the editor inside.

When I try to set the editor's height to 100% it will create an overflow (I think because it takes the 100% of the body but does not recognize that there is also my custom blue toolbar above it).

How do I need to setup my page, that the editor does not go outside of the page at the bottom?

Run this code snippet on a full view page please!



html,body {
height:100%;
margin: 0;
padding: 0;
}

.main_wrapper {
background-color: white;
display: flex;
min-height: 100vh;
flex-direction: row;
}

.content_wrapper {
flex: 1;
display: flex;
flex-direction: column;
}

aside.sidebar {
background-color: grey;
flex: 0 0 195px;
}

header.topbar {
background-color: blue;
flex: 0 0 50px;
}

main {
background-color: white;
flex: 1;
}

.contentbar {
background-color: grey;
flex: 0 0 405px;
}

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>Prototype</title>

<link rel="stylesheet" href="style.css">
<!-- Text Editor Theme included stylesheets -->
<link href="https://cdn.quilljs.com/1.1.5/quill.snow.css" rel="stylesheet">

</head>

<body>
<div class="main_wrapper">
<aside class="sidebar"></aside>
<div class="content_wrapper">
<header class="topbar"></header>
<main>
<div id="editor"></div>
</main>
</div>
<div class="contentbar"></div>
</div>
</body>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.1.5/quill.js"></script>

<!-- Initialize Quill editor -->
<script>

var options = {
bounds: 'main',
theme: 'snow'
};
var editor = new Quill('#editor', options);
</script>

</html>




Answer

Use CSS's calc() function.

The tool-bar above the editor is taking some space, you should decrease that much space from the bottom of .ql-container. The height of the .ql-toolbar may vary on different screens.

Like:

.ql-container {
  height: calc(100% - 42px); /* 100% - height of 'ql-toolbar' */
}

Have a look at the snippet below:

html,body { 
	height:100%; 
	margin: 0;
	padding: 0;
}

.main_wrapper {
	background-color: white;
	display: flex;
	min-height: 100vh;
	flex-direction: row;
}

.content_wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

aside.sidebar {
	background-color: grey;
	flex: 0 0 195px;
}

header.topbar {
	background-color: blue;
	flex: 0 0 50px;
}

main {
	background-color: white;
	flex: 1;
}

.contentbar {
	background-color: grey;
	flex: 0 0 405px;
}

.ql-container {
  height: calc(100% - 42px);
}
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Prototype</title>

  <link rel="stylesheet" href="style.css">
  <!-- Text Editor Theme included stylesheets -->
  <link href="https://cdn.quilljs.com/1.1.5/quill.snow.css" rel="stylesheet">
	
</head>

<body>
	<div class="main_wrapper">
		<aside class="sidebar"></aside>
		<div class="content_wrapper">
			<header class="topbar"></header>
			<main>
				<div id="editor"></div>
			</main>
		</div>
		<div class="contentbar"></div>
	</div>
</body>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.1.5/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
	
  var options = {
      bounds: 'main',
	  theme: 'snow'
	};
	var editor = new Quill('#editor', options);
</script>

</html>

Hope this helps!

Comments