Question

我有一个2列的flexbox布局。列中的项目使用flex:1，我只使用min-height设置其高度。我们的想法是两列应始终保持相同的高度。当colA比colB短时，colA的子项伸展以填充可用高度。当colA高于colB时，colB的项目与其最小高度一样高。

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

问题是：尽管内容高度很高，但是有没有办法让flex项目崩溃到它们的最小高度？我有overflow-y:scroll; min-height: 100px的元素。我希望用一堆内容填充它，不要超过100px高度，除非它的父列要求它扩展。

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

Answer 1

<强>更新

这是一个开始。

scroll元素是必要的，以便能够解决您正在寻找的滚动（flex本身有一些缺陷，使得没有这种情况是不可能的）

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

我将min-height: 80px;添加到item1，因此当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>

尽管内容高度，Flexbox设置最小高度

1 个答案: