css - Flexbox 设置最小高度而不考虑内容的高度

Question

我有一个 2 列的 flexbox 布局。列中的元素使用 flex:1，我只使用 min-height 设置它们的高度。这个想法是两列应该始终具有相同的高度。当 colA 比 colB 短时，colA 的子项会拉伸(stretch)以填充可用高度。当 colA 高于 colB 时，colB 的元素与其最小高度一样高。

问题是，和 css 一样，如果我有一个 min-height: 100px 的元素，但用 500px 高的内容填充它，那么 min-height 将永远不会被使用，有效的最小高度将是内容的高度。(500 像素)。

问题是:在 flex 中有什么方法可以使元素折叠到它们的最小高度而不管它们的内容的高度如何？ 我有一个带有 overflow-y:scroll; 的元素最小高度:100px。我想用一堆内容填充它而不扩展到超过 100 像素的高度，除非它的父列要求它扩展。

更新示例 https://jsbin.com/gicirabufe/1/edit?html,css,output

Answer 1

已更新

这是你的开始。

scroll 元素是解决您正在查看的滚动问题所必需的(flex 本身有一些缺陷，没有它就不可能实现)

item2 现在设置为仅使用与其内容一样多的空间，这是非常需要的，否则滚动将无法在 item1 上正确启动。

我在 item1 中添加了 min-height: 80px;，所以当 item2 中的内容变大时，它不会完全折叠.使用 min-height 值来最好地满足您的需求。

html, body{
  height: 100%;
}
.flex{
  display: flex;
}
.left {
  flex: 1;
  min-height: 100px;
  border: 1px solid black;
}
.right {
  flex: 1;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.item1 {
  flex: 1;
  background: lime;
  position: relative;
  min-height: 80px;
}
.item2 {
  flex: 0;
  background: yellow;
}

.scroll {  
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

<div class="flex">
  <div class="left">
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
  </div>
  <div class="right">
    <div class="item1">
      <div class="scroll">
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
      </div>
    </div>
    <div class="item2">
      Bla 2<br>
    </div>
  </div>  
</div>

<br>

<div class="flex">
  <div class="left">
    Bla<br>
  </div>
  <div class="right">
    <div class="item1">
      <div class="scroll">
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
      </div>
    </div>
    <div class="item2">
      Bla 2<br>
    </div>
  </div>  
</div>