Is it possible for my aside element and div.content to evenly split the available space in the container? Additionally, should the grid within div.content take up all the vertical space?
The issue I'm encountering is that grid items aren't able to adjust their height dynamically. Also, the vertical space taken by the grid (due to grid-gap) is also affecting the heights of both the aside element and div.content, causing a disparity in their heights.
The height of aside should ideally be equal to the height of div.content minus the height of the grid itself.
In summary, setting a height for div.content using flexbox seems restricted, with child elements behaving more like siblings rather than being contained within it.
* {
box-sizing: border-box;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
header,
footer {
background-color: #1A1C22;
height: 100px;
}
.container {
flex: 1 0 400px;
display: flex;
flex-direction: column;
padding-top: 12px;
}
aside {
background-color: #6C757D;
flex: 1 1 auto;
}
.content {
flex: 1 1 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 1fr);
grid-gap: 20px;
border: 2px solid blue;
}
section {
background-color: #343A40;
border: 1px solid red;
}<body>
<header></header>
<div class="container">
<aside></aside>
<div class="content">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
</div>
<footer></footer>
</body>