使 div 子在 100% 高度父 div 内可滚动答案

【问题标题】：Make div child scrollable inside 100% height parent div使 div 子在 100% 高度父 div 内可滚动
【发布时间】：2017-09-21 15:38:59
【问题描述】：

我试图为这个看似简单的问题找到解决方案，但没有成功。我正在使用 AngularJS 和 Angular Material。

index.html

<div class="parent" layout="column" layout-fill ng-view>
</div>

示例 HTML 模板：

<div class="child" layout="column" layout-fill>
    <div flex="20">
        Some content
    </div>
    <div flex>
        Some more content
    </div>
</div>

（parent 和 child CSS 类中没有任何内容，此处仅用作名称参考）

如果内容比屏幕高度短，我希望父 div 和子 div 都是全高，并且内容 div 根据 flex 属性展开。 Angular Material 的 layout-fill 指令添加了 100% 的高度，因此目前可以正常工作。

如果内容长于屏幕高度可以显示的内容，我希望子 div 可以滚动。

我的想法是使用媒体查询将类属性附加到子 div，以防高度低于 400 像素。

@media screen and (max-height: 400px){
.child{
        height: 400px;
        overflow-y: scroll;
    }
}

不幸的是，这不起作用。子高度与父高度相同（屏幕高度）。检查元素（Chrome）时，它说 css 高度是 400px，但计算的高度不是。

我真的不明白。

JSFiddle

有什么想法吗？

【问题讨论】：

标签： css flexbox media-queries angular-material

【解决方案1】：

我会将媒体查询中的设置更改为

  child {
    min-height: 400px;
    overflow-y: visible;
  }

这迫使它与其内容一样高且至少 400 像素，这将在正文中滚动。

https://jsfiddle.net/zy0o7jn6/1/

【讨论】：