To successfully structure the layout, follow these three steps - each step employing a distinct flex layout and flex-direction.
- page-wrapper
- page-header
- page-content
- left-column
- left-column-header
- left-column content
- right-column
- page-footer
1. Organize the header / content / footer using display: flex; flex-direction: column; with flex-grow applied to the content - this positions the header and footer at the top and bottom of the viewport while enabling the content to expand and fill the remaining space.
2. Arrange the left and right columns by utilizing display: flex within the page-content area; (note that the default direction is "row" so no need to specify it).
3. Design the left-column-header and content by implementing display: flex; flex-direction: column; for the left column and adding max-height and overflow-y: auto to the left-column-content
html, body {
height: 100vh;
overflow: hidden;
padding: 0;
margin:0
}
ul {
margin: 0;
padding:0;
list-style: none;
}
.page-wrapper {
display: flex;
flex-direction: column;
border: solid 1px #222;
}
.page-header,
.page-footer {
height: 30px;
flex-shrink: 0;
line-height: 30px;
padding: 0 8px
}
.page-content {
border-top: solid 1px #222;
border-bottom: solid 1px #222;
flex-grow: 1;
display: flex;
}
.right-column {
width: 60%;
flex-grow: 1;
border-left: solid 1px #222;
padding: 8px 16px
}
.left-column {
width: 40%;
flex-shrink:0;
display: flex;
flex-direction: column;
}
.left-column-header {
height: 40px;
flex-shrink:0;
align-items: center;
border-bottom: solid 1px #222;
display: flex;
}
.left-column-header div {
flex-grow: 1;
padding: 4px 8px
}
.left-column-content {
overflow-y: auto;
max-height: calc(100vh - 100px);
padding: 0 8px
}
<div class="page-wrapper">
<div class="page-header">Header</div>
<div class="page-content">
<aside class="left-column">
<div class="left-column-header">
<div class="search-input-wrapper">
<input type="text" placeholder="Search" />
</div>
<div class="search-button-wrapper">
<button type="button" >Button</button>
</div>
</div>
<div class="left-column-content">
<ul>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
<li>Search results</li>
</ul>
</div>
</aside>
<main class="right-column">Right column</main>
</div>
<div class="page-footer">Footer</div>
</div>