To ensure proper utilization of Flexbox, it is recommended to make the app element take up the full height. This can be achieved by using either height: 100vh, or by giving the html/body elements a defined height like so: html, body { height: 100% }. This will ensure that the height of the app behaves as expected.
Furthermore, when using align-items: flex-start, all items will align at the top by default. Adding align-self: stretch to the sidebar element will cause it to fill its parent's height.
It is important to note that for flex row items, height: 100% should not be used; rather, the align-* properties should be utilized.
Another point to consider is that setting flex: 1 on both content-header and content-main may not have any effect unless their parent content has a height greater than the combined heights of the two children. In such cases, adjusting the app's align-items property to stretch may be necessary (potentially eliminating the need for align-self on the sidebar).
Lastly, keep in mind that flex: 1 may not function correctly in Internet Explorer. It is advisable to use flex-grow: 1 as an alternative, or define all values explicitly where flex-basis should be set to auto, e.g., flex: 1 1 auto.
Stack snippet
body {
margin: 0;
}
.app {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 100vh; /* changed */
width: 100%;
}
.sidebar {
background-color: red;
align-self: stretch; /* added */
}
.content {
width: 100%;
display: flex;
flex-direction: column;
}
.content-header {
flex: 1; /* for IE, "flex-grow: 1" or "flex: 1 1 auto"
*/
background-color: grey;
}
.content-main {
flex: 1; /* for IE, "flex-grow: 1" or "flex: 1 1 auto"
*/
background-color: yellow;
}
<div class='app'>
<div class='sidebar'>
This is sidebar
</div>
<div class='content'>
<div class='content-header'>
Content Header
</div>
<div class='content-main'>
This is the main content
</div>
</div>
</div>