I'm currently working on designing a flex box based HTML layout like the one shown in the image link provided below.
https://i.stack.imgur.com/nBl6N.png
The layout should consist of 3 rows within the viewport with the following structure:
- top: "main header"
- middle: "home"
- bottom: "main footer"
The "home" section should have a left side "menu" and a "container" on the right.
Within the "container" there should be:
- top: "container-header"
- middle: "box container"
- bottom: "container-footer"
The middle "box container" needs to be scrollable.
I've managed to create the layout successfully. You can view the codepen link here.
Here is an excerpt of the code:
HTML, body {
height: 100%;
overflow: hidden;
margin: 0;
}
.window {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.footer {
display: flex;
flex-direction: row;
justify-content: center;
background-color: cyan;
}
.home {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
}
.menu {
width: 200px;
border: 1px solid green;
flex-shrink: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: auto;
flex: 1;
border: 1px solid blue;
}
.container-header {
width: 100%;
text-align: center;
background-color: purple;
}
.container-footer {
text-align: center;
background-color: mediumslateblue;
}
.box-container {
display: flex;
justify-content: space-between;
overflow: auto;
border: 1px green solid;
}
.box {
width: 600px;
height: 600px;
margin: 10px;
background-color: red;
text-align: center;
padding: 5px;
flex-shrink: 0;
}<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="window">
<div class="header">
<div>Left</div>
<div>Right</div>
</div>
<div class="home">
<div class="menu">
menu
</div>
<div class="container">
<div class="container-header">
Container Header
</div>
<div class="box-container">
<div class="box">
box - 1
</div>
<div class="box">
box - 2
</div>
<div class="box">
box - 3
</div>
</div>
<div class="container-footer">
Container Footer
</div>
</div>
</div>
<div class="footer">
<div>Left</div>
<div>Right</div>
</div>
</div>
</body>
<html>Despite achieving the desired layout, I've encountered a slight issue.
In order to make the "box container" scrollable, I initially assumed setting the overflow property of the "box container" to auto would suffice.
However, it appears that this alone does not achieve the desired effect. I had to set the overflow property of the "container" to auto as well in order to make the "box container" scrollable.
In fact, setting the overflow property to auto for both the "container" and "box container" is necessary.
Why is this additional step required?