孩子比父母大，最大高度。溢出没有影响答案

【问题标题】：Child is larger than parent with max-height. Overflow has no effect孩子比父母大，最大高度。溢出没有影响
【发布时间】：2013-10-06 06:27:04
【问题描述】：

我想要一个具有最大高度的父元素和一个填充该父元素的子元素。如果子项的内容超出父项，则应出现滚动条。我试图这样解决它：

div.parent {
  max-height: 50px;
  width: 100px;
  border: 1px solid black;
}

div.child {
  height: 100%;
  overflow-y: auto;
}

<div class="parent">
  <div class="child">
    <div class="some-content">
      abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br> abcde
      <br>abcde<br>abcde<br>abcde<br>abcde<br>
    </div>
  </div>
</div>

不幸的是，这并没有按预期工作。孩子比父母长大。

请注意，将 overflow-y: auto 设置为 PARENT 不是一个选项，因为它被怀疑包含不应滚动的其他项目。怀疑孩子填补了父母留下的空间。更多信息，请查看现场演示。

Live DEMO

【问题讨论】：

将max-height 更改为height 似乎有效果。不知道是不是你想要的……
你必须指定子元素的高度。否则溢出将不起作用。
这应该可以解释为什么它不起作用：stackoverflow.com/questions/5657964/… 至于解决方案...要么为包含的元素设置一个特定的高度，要么使用 JavaScript。编辑：为包含元素设置特定高度也不能完全解决问题，因为100% 将模仿父级的确切高度。

标签： html css

【解决方案1】：

据我所知，使用 CSS 没有简单的方法可以做到这一点。本质上，您是在要求浏览器用可滚动元素填充剩余空间。你可以用 JavaScript 做到这一点（这个例子使用 jQuery，因为我很懒）：

$('.parent').each(function(){
    $(this).children('.child').height($(this).height() - $(this).children('.sibling').height()+"px");
});

http://jsfiddle.net/BUxUe/13/

【讨论】：

太烦人了，CSS 无法做到这一点

【解决方案2】：

您可以尝试使用 Flexbox。

div.parent {
    max-height: 300px;
    width: 200px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
}
div.sibling {
    border: 1px solid red;
    flex: 0 0 auto;
}
div.child {
    overflow-y: auto;
    border: 1px solid blue;
    flex: 0 1 auto;
}

我不确定，这是否是一种黑客行为。不过好像解决了这个问题。

【讨论】：

【解决方案3】：

看看Fiddle

div.parent {
    max-height: 50px;
    width: 100px;

    border: 1px solid black;
    overflow:scroll;
}

div.child {
    height: 100%; 
}

【讨论】：

OP 已经指定不能将父级设置为overflow-y:auto。 OP 希望有一个可滚动元素在填充 remaining 可用高度的父级。