一个flex / grid项设置了兄弟姐妹的高度限制 [英] One flex/grid item sets the height limit for siblings

查看:72
本文介绍了一个flex / grid项设置了兄弟姐妹的高度限制的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个同级元素,每个元素都包含动态内容。

I have two sibling elements which each contain dynamic content.

<div class="flex">
    <div class="sibling-1"></div>
    <div class="sibling-2"></div>
</div>

在某些情况下,兄弟姐妹-1 然后再添加 sibling-2 ,反之亦然。
我希望第二个元素 sibling-2 的高度始终等于第一个 sibling-1 。如果 sibling-2 的高度更大,则 sibling-1 的高度将溢出 flex div,因此是可滚动的。

In some cases sibling-1 will have more content then sibling-2 and vice versa. I would like the height of the second element sibling-2 always equal the height of the first sibling-1. If the height of sibling-2 is greater then the height of sibling-1 it will overflow the flex div and thus be scrollable.

是否可以用Flexbox做到这一点?

Is there any way to accomplish this with Flexbox?

推荐答案

是的,有可能。让兄弟姐妹单独设置最大高度,然后设置其他人的 flex-basis:0 flex-grow:1 ,根据规范,它们会将它们扩展到其兄弟姐妹的高度。没有绝对定位。

Yes, it is possible. Leave the sibling setting the max height alone and set the others' flex-basis: 0 and flex-grow: 1, which according to the spec will expand them to their sibling's height. No absolute positioning. No setting height on any elements.

main {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  width: 7em;
  border: thin solid black;
  margin: 1em;
}

:not(.limiter)>div {
  flex-basis: 0px;
  flex-grow: 1;
  overflow-y: auto;
}

<main>
  <section>
    <div>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text
      in flow text in flow text in flow text in flow text in flow text in flow text in</div>
  </section>

  <section class="limiter">
    <div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
  </section>

  <section>
    <div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
  </section>
</main>

这篇关于一个flex / grid项设置了兄弟姐妹的高度限制的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆