Creating a Sidebar within a flexbox with CSS [duplicate] - html

Question

This question already has answers here:
How to create a sidebar and content area using flexbox?
(1 answer)
Flexbox layout, push content when opening sidebar?
(1 answer)
Flexbox sidebar with max-width
(1 answer)
Closed 5 years ago.
on my page I want to have a header and below this I want to have a sidebar on the left side and the content page on the right side.
The sidebar should have a width of X (maybe 100 px) and the content page should have the rest of the full window with.
I started creating this but my sidebar and content page don't have a full height. Even when setting height to 100% the don't fill the rest of the page.
And why do I have to set a min and max width for the sidebar instead of width? When setting width: 100px the width returns 70px.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: Ubuntu;
background: linear-gradient(#b3ffab, #67fffc);
}
#header {
height: 30px;
display: flex;
align-items: center;
background: linear-gradient(#444444, #333333);
color: #bbbbbb;
}
#headerContent {
margin-left: 10px;
}
#page {
display: flex;
}
#sideBar {
min-width: 100px;
max-width: 100px;
background: red;
}
#content {
width: 100%;
background: blue;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu" />
<div id="header">
<div id="headerContent">
Desktop
</div>
</div>
<div id="page">
<div id="sideBar">
<div>
box 1
</div>
<div>
box 2
</div>
</div>
<div id="content">
content
</div>
</div>

Answer 1

You can set the height and width in a flexible way.
Height is set to 100% of the height of the viewport minus the height of the header.
Width is set to 100px for the sidebar. The content is now allowed to grow to fill the rest of the screen.
Hope this helps.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: Ubuntu;
background: linear-gradient(#b3ffab, #67fffc);
}
#header {
height: 30px;
display: flex;
align-items: center;
background: linear-gradient(#444444, #333333);
color: #bbbbbb;
}
#headerContent {
margin-left: 10px;
}
#page {
display: flex;
height: calc( 100vh - 30px);
/* calculate the height. Header is 30px */
}
#sideBar {
width: 100px;
background: red;
}
#content {
background: blue;
flex: 1 0 auto;
/* enable grow, disable shrink */
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu" />
<div id="header">
<div id="headerContent">
Desktop
</div>
</div>
<div id="page">
<div id="sideBar">
<div>
box 1
</div>
<div>
box 2
</div>
</div>
<div id="content">
content
</div>
</div>