CSS-сетка ⇐ CSS

[Anonymous]

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

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

.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