Question

很明显如何使用flexbox使两个div与最高的div相同。

但对我来说，根据最短的div，它不清楚如何设置相同的高度。

例如，我连续有两个div，第一个div高度取决于里面图像的大小。所以我想设置第二个div的高度相同。

Answer 1

所以我想设置第二个div的高度相同。

是否有任何超出该高度的内容被切断，或为第二个弹性列创建滚动条......？

我不知道如何使用任何flexbox属性。

我可能通过在第二个弹性项目中放置一个绝对定位的元素来解决这个问题，以便它从上到下从左到右延伸，然后将该元素上的overflow设置为{{1} }或hidden，具体取决于所需的效果。

auto

.flex-container { display:flex; }
.flex-item { flex:0 0 50%; position:relative; }
.flex-item img { display:block; max-width:100%; width:100%; height:auto; }
.flex-item-inner { position:absolute; top:0; left:0; right:0; bottom:0; overflow:auto; }
.flex-item-inner p:first-child { margin-top:0; }

Answer 2

对于要滚动的弹性项目，需要高度，否则它将随其内容增长。

为了解决这个问题，你可以像这样解决它，将内部元素设置为position: absolute。

.wrap {
  display: flex;
}

.left {
  flex: 1;
  border: 1px solid gray;
}

.right {
  flex: 1;
  border: 1px solid gray;
  position: relative;
}

.text {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

<div class="wrap">
  <div class="left">
    <img src="http://lorempixel.com/200/200/city/7" alt="" >
  </div>
  <div class="right">
    <div class="text">
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
      Bla bla<br>
    </div>
  </div>
</div>

使用flexbox为div设置相同的高度（取决于最短的）

2 个答案: