Question

我有一个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的最大值（因此300px或等于#right）。如果内容较大，则应显示滚动条。

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

如何为#left提供动态高度（取决于#right），并仍然强制#inner-content取得高度而不是它的内容高度？我还提出了bin目前的情况。

Answer 1

一种方法是绝对定位inner-content元素，就像这样，通过这样做，你在使用百分比高度时克服了这个问题，通常需要在每个父级上设置它一直到body（或具有固定高度值的第一个元素）

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

然后#Right的高度始终与#left相同。如果要为元素设置最小高度，请将其设置为#wrapper。

孩子应该采取min-heigth-parent的高度

2 个答案: