CSS grid with scrollable row that expands - html

Question

I have 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.
I want the second row to remain at the bottom of the div.
I have tried using display: flex; in the first row.
HTML:
<div class="parent">
<span class="top">my<br>long<br>long<br>long<br>content</span>
<span class="bottom">always visible</span>
</div>
CSS:
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;
}
https://jsfiddle.net/9re86f2a/
I expect the first row to scroll when there is no space, but it actually remains the same size.
I expect the first row to expand when there is space, but it actually remains the same size.

Answer 1

I would use the flex model for this kind of behavior even if grid does it fine ;)
html * {
box-sizing:border-box;
padding:0.25em;
margin:0;
}
body {
height:100vh;
}
.parent {
display: flex;
flex-direction: column;
max-height: 100%;
overflow: hidden;
}
.top {
flex-grow: 1;
overflow: auto;
/* style aside */
background:lightblue;
margin:2px;/* or 0 */
border:solid;
}
.bottom {
flex-shrink: 0;
/* style aside */
background:tomato;
margin:2px;/* or 0 */
border:solid;
}
/* demo purpose */
.top .demo {
display: block;
max-height: 0;
overflow: hidden;
transition: 1.5s;
}
.top:hover .demo {
max-height: 300vh;
}
<div class="parent">
<span class="top"><b>Hover me to show my long content</b>
<span class="demo"><br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content</span>
</span>
<span class="bottom">always visible</span>
</div>

Answer 2

There's nothing in your code that triggers an overflow condition.
In order for content to overflow, it needs to exceed a width or height limitation (e.g. height: 300px), which then triggers the scrollbar.
From MDN:
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
In other words, without a fixed height, you won't get the vertical scrollbar... in Chrome! Ironically, however, in Firefox, a product of MDN, and Edge, the MDN rule above doesn't apply, and your layout works just fine.
.parent {
display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr 0fr;
grid-gap: 2px;
background-color: black;
height: 100vh;
}
.top {
overflow-y: auto;
}
span {
background-color: white;
}
body {
margin: 0;
}
<div class="parent">
<span class="top">my<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content<br>long<br>long<br>long<br>content</span>
<span class="bottom">always visible</span>
</div>
jsFiddle demo
Note on browser rendering differences: I can only speculate as to why Firefox and Edge render a scrollbar on a block-level container that doesn't have a defined height or max-height, as specified by MDN (see above). They could be engaging in an intervention or may have a different interpretation of the specification than the MDN contributors.