Getting a Grid to stretch The Appropriate Length
I have a grid that holds my sidebar and my main content. I want the grid to stretch till the padding of my body. I’ve messed with setting the height to different things but the grid never expands. I would guess I might need to do something with min-height but I’m not sure.
HTML
<div class="sidebar">
<ul>
<li> a </li>
<li> b </li>
<li> c </li>
</ul>
</div>
<div class="content"> </div>
CSS
.sidebar {
width: 20%;
height: 100%;
position: fixed;
top: auto;
left: auto;
background-color: blue;
overflow: auto;
z-index: 1;
}
.sidebar ul {
height: 100%;
margin: 0% 2% 0% 2%;
padding: 0px;
list-style: none;
display: flexbox;
flex-direction: column;
flex-wrap: wrap;
}
.sidebar ul li {
margin: 2% 0% 2% 0%;
height: 30px;
width: 100%;
background-color: cyan;
justify-content: space-between;
border-radius: 5%;
}
.sidebar ul li:hover {
background-color: cadetblue;
}
.content {
background-color: green;
}
5 Replies
if I understand you correctly, I've always used min-width: 100% to fix this. that's my band-aid for the time being
I realized I attached the wrong screen shots:
When I added min-width: 100%; & min-height: 100% to .content-box nothing seemed to change
[not related to the problem]
Please post any type of code in code blocks :) It'll make it easy for people to read and understand the code
Can you post this in a codepen please? #how-to-ask-good-questions
Also it's
display: flex not flexbox