如何使元素不大于封闭元素？答案

【问题标题】：How to make an element no larger than the enclosing element?如何使元素不大于封闭元素？
【发布时间】：2017-08-27 12:27:28
【问题描述】：

<div id="outer">
    <h2>blah</h2>
    <div id="inner"><!--content--></div>
</div>

#outer 具有固定的预定义大小。我希望#inner 始终位于#outer 内（如果#inner 的内容太大，则无法滚动）。

“解决方案”：

#inner {
    width: 100%;
    height: 100%;
    overflow: scroll;
}

这个解决方案是错误的，因为它使#inner 的垂直大小与#outer 完全相同，并且由于#inner 低于h2，所以它使#inner 总是超出#outer ，看起来真的很丑。

现在我不知道h2 的垂直大小（因为它取决于字体），据我所知 CSS 不允许我们动态检索元素的大小，所以我做不到类似的东西：

#inner {
    height: calc(100% - getHeightOf(#outer>h3));
}

我的问题的解决方案是什么？无论#inner 的内容有多大，我怎样才能让#inner 永远不会出门#outer？

【问题讨论】：

minimal reproducible example 怎么样？我无法理解你所说的一切。就像你提到的<h3> 一样，我在很少的 HTML 中看到的只是<h2>。虽然我知道 <h2> 和 <h3> 就您要解释的内容而言基本上是同一件事，但是一旦一件事与另一件事不相符，我就会失去注意力。因此minimal reproducible example 形式的代码更加简洁。
@zer00ne 很抱歉 h2 / h3 不匹配，这是一个错字。
是的，如前所述，我知道这是一个错字。我的意思是你应该写一个minimal reproducible example，因为一堵文字墙没有描述性。

标签： html css css-position

【解决方案1】：

场景 1：您不希望 h2 内容处于固定位置。如果内部内容溢出，它也会滚动。

#outer{
  width: 100%;
  height: 200px;
  background-color: #eee;
  border: 2px solid grey;
  overflow: auto;
}
#inner{
  background-color: #ccc;
}

<div id="outer">
    <h2>blah</h2>
    <div id="inner">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

场景 2：您希望 h2 在某种意义上被固定，使其不应该滚动。滚动条应该只在内部 div 中。在这种情况下，使用 div 代替 h2 并使用如下所示的确定高度：

#outer{
  width: 100%;
  height: 200px;
  background-color: #eee;
  border: 2px solid grey;
  overflow: hidden;
}
.my-h2{
  font-size: 20px;
  font-weight: bold;
  height: 10%;
}
#inner{
  height: 90%;
  overflow: auto;
  background-color: #ccc;
}

<div id="outer">
  <div class="my-h2">blah</div>
    <div id="inner">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

【讨论】：

【解决方案2】：

将Overflow:scroll 属性赋予outer

【讨论】：