Переполнение не работает с FR ⇐ Jquery

[Anonymous]

У меня есть следующая структура HTML: < /p>

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

// A lot of data





< /code>

и использование следующего стиля CSS: < /p>

*{
margin: 0;
padding: 0;
border:0;
box-sizing: border-box;
}

#container{
position: absolute;
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 50px 1fr 10px;
align-items:stretch;
justify-items:stretch;
}
#content{
display: grid;
grid-template-columns: 1fr 300px;
background-color:rgb(128, 126, 126);
}
.something{
position: relative;
overflow-y:hidden;
overflow-x:hidden;
padding:10px;
margin:30px 0px;
}
.lateralInfo{
background-color:#eaeaea;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
position: relative;
height: 100%;
align-content:flex-start;
display:grid;
grid-template-rows: auto 1fr;
}
.data{
padding:10px;
display:grid;
grid-gap:10px;
align-content: flex-start;
overflow-y: scroll;
}
< /code>

This give me the next output:
[img]https://i.sstatic.net/oIHga.png[/img]


[b]The problem[/b] comes when I insert a lot of divs

in .data , где я здесь составил в изображении.

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

.data{
overflow-y: scroll;
}
< /code>

overflow-y

не работает.
Я проверил некоторые сообщения, где они говорят, что ему нужна высота , указанная у родителя для работы, но :

im использует FR во всех родителях .data , что означает, что им нужно использовать свободное пространство, но не больше. Таким образом, высота указана. Тогда почему не работает?var contentHeight = $("#content").innerHeight();
$(".lateralInfo").css("height", contentHeight);
< /code>

to set a height when the site loads to adjust to each screen,But this is what fr< /code> должен делать в CSS. < /p>


Так почему это происходит, поскольку у всех родителей есть высота FR? И как решить это только с помощью CSS?>

Подробнее здесь: https://stackoverflow.com/questions/517 ... ng-with-fr