How can I create a CSS grid with a single column and two rows?
I want the first row to expand when there is space and to scroll when there is no space, while keeping the second row at the bottom of the div.
I attempted using display: flex; in the first row, but it did not work as expected.
Here is my current HTML setup:
<div class="parent">
<span class="top">my<br>long<br>long<br>long<br>content</span>
<span class="bottom">always visible</span>
</div>
And here is the CSS I am using:
body {
overflow-y: hidden;
}
.parent {
display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr 0fr;
}
.top {
overflow-y: scroll;
display: flex;
flex-direction: column;
}
span {
border: solid;
}
You can view a demo of the code here.
However, I am facing issues with the first row not scrolling when needed and not expanding when there is space.