Сетка с дескриптором изменения размера — элемент не выйдет за пределы исходных настроек. ⇐ CSS

[Anonymous]

Пожалуйста, посмотрите пример кода. Я могу использовать маркер изменения размера, чтобы изменить размер верхней панели, а нижняя панель сожмется соответствующим образом, но не выйдет за пределы первоначального размера. Это поведение одинаково в FF и Chrome. Увы, поиск решения оказался трудным. Я пробовал использовать auto вместо 5fr, добавлять свойства максимальной высоты и т. д. Ничего не изменило поведение. Спасибо.




* {
box-sizing: border-box;
font-family: sans-serif;
}

body {
margin: 0;
height: 100%;
}
thegrid {
height: 100vh;
display: grid;
grid-template-rows: 1fr 5fr min-content;
grid-gap: 0;
}

upperpanel {
overflow-x: hidden;
overflow-y: auto;
min-height: 50px;
resize: vertical;
border: 3px dotted red;
background-color: antiquewhite;
}

lowerpanel {
overflow-x: hidden;
overflow-y: auto;
text-align: left;
border: 0;
padding: 5px;
background-color: lightsteelblue;
display: grid;
grid-gap: 0;
grid-template-columns: 100px 1fr;
}
statusbar {
padding: 2px;
font-size: 10px;
font-style: italic;
background-color: lightgray;
}








Some things go here.




Some
stuff
in
here.

This is the main output area.

The lower panel shrinks ok but it cannot grow beyond original size.




Some other stuff goes in here.









Подробнее здесь: https://stackoverflow.com/questions/793 ... al-setting