为flex设置div的高度相等（取决于最短的） [英] Setting equal height for divs with flexbox(depending on the shortest one)

问题描述

它显然是如何使两个div与flexbox最高的一个高度相同。

但是对于我来说，不清楚如何设置相等的高度，取决于最短的div。

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

解决方案

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

有超过这个高度的任何内容被切断，或为第二个flex列创建一个滚动条...？

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

我可能通过把一个绝对定位的元素第二个Flex项目，以便它从上到下，从左到右延伸，然后在该元素上设置 overflow 到 hidden 或 auto ，具体取决于期望的效果。

data-lang =jsdata-hide =false>

。 flex-container {display：flex; } .flex-item {flex：0 0 50％;位置：相对; } .flex-item img {display：block;最大宽度：100％;宽度：100％;高度：自动; } .flex-item-inner {position：absolute;顶部：0;左：0;右：0;底部：0;溢出：汽车; } .flex-item-inner p：first-child {margin-top：0; }

 < div class =flex-container> ; < div class =flex-item> < img src =http://placehold.it/350x150> < / DIV> < div class =flex-item> < div class =flex-item-inner> < p为H. Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐amet。 < / p为H. < p为H. Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐amet。 < / p为H. < p为H. Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐amet。 < / p为H. < / DIV> < / div>< / div>  

Its obvious how to make two divs the same height of the tallest one with flexbox.

But for me it's not clear how to set equal height, depending on the shortest div.

For example i have two divs in a row, first div height is dependent on the size of image inside. So i want to set height of second div the same.

解决方案

So i want to set height of second div the same.

And have any content that exceeds that height be cut off, or create a scrollbar for the second flex column …?

I don’t know how that would be possible using any of the flexbox properties.

I’d probably solve this by putting an absolutely positioned element inside the second flex item, so that it stretches from top to bottom and left to right, and then set overflow on that element to hidden or auto, depending on what exactly the desired effect is.

.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; }

<div class="flex-container">
  <div class="flex-item">
    <img src="http://placehold.it/350x150">
  </div>
  <div class="flex-item">
    <div class="flex-item-inner">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

这篇关于为flex设置div的高度相等（取决于最短的）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！