CSS-сетка [закрыто] ⇐ CSS

[Anonymous]

Как предотвратить увеличение высоты дочернего элемента в макете сетки после добавления в него содержимого, содержимое увеличивает высоту элемента. Я пробовал использовать статическую высоту и скрытое переполнение.
В настоящее время я создаю макет информационной панели с использованием контейнера CSS Grid с фиксированной высотой области просмотра (100vh). Макет состоит из боковой панели и нескольких панелей контента («Заголовок», «Основная», «Заказы» и т. д.).
Цель: я хочу, чтобы .aside (боковая панель) оставалась статичной, а общая структура сетки оставалась привязанной к области просмотра. Если дочерний элемент (например, раздел «Основной» или «Заказы») получает большое количество динамического содержимого, я хочу, чтобы этот конкретный дочерний элемент оставался на назначенной ему высоте сетки и стал прокручиваемым, вместо того, чтобы сдвигать строку сетки вниз и создавать полосу прокрутки на уровне страницы.
Текущая проблема: несмотря на то, что я определил строки-шаблона сетки, строки, похоже, рассматривают высоту как «минимальную», а не «строгое» ограничение. Когда содержимое добавляется к дочернему элементу, вся строка сетки растягивается, чтобы соответствовать новой высоте, нарушая пропорции макета.

Код: Выделить всё

.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;
}

Код: Выделить всё

Last Login: Today, 9:42

Alex Philip



Aside
Main
Order
subscription
Delivery

Подробнее здесь: https://stackoverflow.com/questions/798 ... rid-layout