如何允许高度设置为“自动”的 CSS 网格行溢出答案

【问题标题】：How do I allow overflow on a CSS Grid row whose height is set to `auto`如何允许高度设置为“自动”的 CSS 网格行溢出
【发布时间】：2019-06-20 00:37:10
【问题描述】：

我正在尝试实现一个简单的视图。该视图由顶视图和底视图组成。

顶部是静态且无趣的。

底部将包含溢出该组件边界的内容。在这种情况下，我希望它显示滚动溢出。

This is roughly how I want it to look (gif screen recording)

问题是我的布局是在 CSS 网格中构建的。不要问为什么，这不是要改变的。也可以使用视口单位。

如果您阅读下面的代码，布局大致翻译为：

"创建两行。第一行将具有定义的高度。第二行将填充剩余的可用空间"

虽然这在底行的内容很小时有效，但当底行的内容溢出时它会中断。具体来说，它会扩展 .bottomRow 的大小，并且组件会离开屏幕而不会溢出。

Here is a screen recording that illustrates this behavior

这里发生的情况是，您看到的蓝色 div 的高度与其子元素的溢出大小相匹配。我希望它保持它的大小，而不是溢出。

这是我目前的代码（这不完全是屏幕录像中的代码。只是要领）

.layout {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: max-content auto / 1fr
}

.topRow {
    height: 50px;
    width: 100%
}

.bottomRow {
    width: 100%;
    height: 100%;
    /* max-height: ???; works if set to a static value */
    box-sizing: border-box;
    border: 5px solid black;
    overflow-y: auto;
}

<div class='layout'>
   <div class='topRow'/>
   <div class='bottomRow'>
   // ENOUGH CONTENT TO OVERFLOW
   </div>
</div>

我能够成功实现这一点的唯一方法是设置最大高度。

See screen recording

但是要使这个动态化，我必须添加一个事件侦听器来调整组件大小。不理想！

我也尝试过使用max-height: -webkit-fill-available，虽然这适用于 Chrome，但不适用于其他主流浏览器。

请帮忙！总的来说，我正在尝试找到一种避免使用 3rd 方库、JavaScript、事件侦听器并且兼容跨浏览器的解决方案。

【问题讨论】：

它工作正常，即使没有 height 和 width 。 codepen.io/anon/pen/Oebogq
嗨 adrayv，您必须在 .layout 上使用 height: 100vh 或在上面共享的代码笔中添加 html,body{height: 100%} (ref)，您就可以开始了！另见stackoverflow.com/questions/46158276

标签： html css

【解决方案1】：

我今天遇到了同样的问题，将 grid-template-rows 的值设置为 max-content 1fr 就可以了。

CSS 需要一个固定值来执行滚动行为。 auto 不算，但 1fr 则相反！

米歇尔

【讨论】：