How do I prevent the child element in my grid layout from increasing in height after adding content to it, the content increases the height of the element, I have tried using a static height and overflow hidden.
I am currently building a dashboard layout using a CSS Grid container with a fixed viewport height (100vh). The layout consists of a sidebar and several content panels (Header, Main, Orders, etc.).
The goal: I want the .aside (sidebar) to remain static and the overall grid structure to stay locked to the viewport. If a child element (like the 'Main' or 'Orders' section) receives a large amount of dynamic content, I want that specific child to stay at its assigned grid height and become scrollable, rather than pushing the grid row down and creating a page-level scrollbar.
The current issue: Even though I have defined grid-template-rows, the rows seem to be treating the height as a 'minimum' rather than a 'strict' limit. When content is added to a child, the entire grid row stretches to accommodate the new height, breaking the layout's proportions.
.user {
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 50px;
margin: 0 auto;
color: #000;
}
.user * {
background-color: var(--bg--color);
padding: 30px;
border-radius: var(--border--radius);
}
.user .header {
grid-column: 3/12;
grid-row: 1/2;
display: flex;
justify-content: space-between;
color: #000;
}
.user .header * {
border: 1px solid #000;
}
.user .header .img {
display: flex;
justify-content: space-between;
color: #000;
}
.user .aside {
grid-column: 1/3;
grid-row: 1/7;
position: fixed;
top: 0;
left: 0;
width: 180px;
height: 100vh;
}
.user .main {
grid-column: 3/12;
grid-row: 2/5;
}
.user .order {
grid-column: 3/6;
grid-row: 5/7;
}
.user .subscription {
grid-column: 6/9;
grid-row: 5/7;
}
.user .delivery {
grid-column: 9/12;
grid-row: 5/7;
}
<div class="user">
<div class="header">
<div class="time">
<p>Last Login: Today, 9:42</p>
</div>
<div class="img">
<p>Alex Philip</p>
<img src="" alt="User Image">
</div>
</div>
<div class="aside">Aside</div>
<div class="main">Main</div>
<div class="order">Order</div>
<div class="subscription">subscription</div>
<div class="delivery">Delivery</div>
</div>
