孩子应该采取最小身高父母的身高答案

【问题标题】：Child should take height of min-heigth-parent孩子应该采取最小身高父母的身高
【发布时间】：2017-03-24 09:53:31
【问题描述】：

我有一个 flex wrapperdiv、两个孩子和一个左孩子的内孩子。

HTML

<div id="wrapper">
  <div id="left">
    <div id="inner-content">
    </div>
  </div>
  <div id="right">
  </div
</div>

CSS

#wrapper {
  display: flex;
  width: 400px;
}

#left {
  background-color: red;
  width: 40%;
  min-height: 300px;
}

#inner-content {
  background-color: rgba(255,255,255, .6);
  height: 100%;
  overflow: auto;
}

#right {
  background-color: green;
  width: 60%;
}

#left 的高度应始终至少为 300px；如果#right的内容超过300px，#left应该等于#right。

#inner-content 的高度应始终为 #left 的最大值（因此为 300 像素或等于 #right）。如果内容较大，应该会出现一个滚动条。

目前，#inner-content 不显示滚动条，因为父 #left 确实只有最小宽度。

我怎样才能给#left 一个动态高度（依赖于#right），并且仍然强制#inner-content 采用该高度而不是它的内容高度？我还根据当前情况发了bin。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

一种方法是绝对定位 inner-content 元素，像这样，通过这样做，您可以解决使用百分比作为高度时的问题，通常需要在每个父元素上设置它一直到正文（或具有固定高度值的第一个元素）

#wrapper {
  display: flex;
  width: 400px;
}
#left {
  position: relative;
  background-color: red;
  width: 40%;
  min-height: 300px;
}

#inner-content {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background-color: rgba(255,255,255, .6);
  overflow: auto;
}

#right {
  background-color: green;
  width: 60%;
}

<div id="wrapper">
  <div id="left">
    <div id="inner-content">
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
  </div>
  </div>
  <div id="right">
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
      Content<br><br><br>
  </div>
</div>

【讨论】：

【解决方案2】：

将align-items:stretch; 添加到您的#wrapper 并删除#right 上的固定高度。

那么#Right 的高度总是与#left 相同。如果要为元素设置最小高度，请将其设置为 #wrapper。

【讨论】：

#right 的高度只是一个例子，内容确实设置了高度。只有#left 有一个最小高度（在我的应用程序中，它的最小高度是100vh，因此是视口高度的最小值）。我希望 left 是视口的最小值 - 或 - 与 #right 一样大。所以无论#inner-conent 有多大，#left 的高度都不会改变。