search

Home  >  Q&A  >  body text

Sibling items are limited in size in flex/grid layout

<p>I have two sibling elements, each containing dynamic content. </p> <pre class="brush:php;toolbar:false;"><div class="flex"> <div class="sibling-1"></div> <div class="sibling-2"></div> </div></pre> <p>In some cases, <code>sibling-1</code> will contain more content than <code>sibling-2</code>, and vice versa. I want the height of the second element <code>sibling-2</code> to always be equal to the height of the first <code>sibling-1</code>. If the height of <code>sibling-2</code> is greater than the height of <code>sibling-1</code>, it will overflow the <code>flex</code> div and become scrollable. </p> <p>Is there a way to achieve this effect using Flexbox? </p>
P粉134288794P粉134288794547 days ago504

reply all(2)I'll reply

  • P粉322918729

    P粉3229187292023-08-25 11:16:32

    Basically not possible. The flex height feature is based on the height of the container, not any specific sibling elements.

    So, brother element 1 and brother element 2 can always be of the same height.

    However, flexbox has no built-in mechanism to constrain an item to be the same height as a sibling element.

    Consider using JavaScript or CSS positioning properties.

    Here is an example using absolute positioning:

    .flex {
      display: flex;
      width: 200px;
      position: relative;
    }
    
    .flex>div {
      flex: 0 0 50%;
      border: 1px solid black;
      box-sizing: border-box;
    }
    
    .sibling-2 {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      right: 0;
      overflow: auto;
    }
    <div class="flex">
      <div class="sibling-1">text<br>text<br>text<br>text<br>text<br>text<br></div>
      <div class="sibling-2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
    </div>

    jsFiddle

    reply
    0
  • P粉008829791

    P粉0088297912023-08-25 09:49:37

    Yes, it is possible. Retain the maximum height set by the sibling node, and set the other nodes' flex-basis: 0 and flex-grow: 1 to, according to the specification, they will expand to the same height as the sibling node high. There is no absolute positioning. No height is set on any element.

    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>我更长,会滚动溢出。在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中
          在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在</div>
      </section>
    
      <section class="limiter">
        <div>每个父节点的兄弟节点与我的高度相匹配。在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中</div>
      </section>
    
      <section>
        <div>我虽然较短,但仍然与高度相匹配。在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中,在流动文本中</div>
      </section>
    </main>

    reply
    0
  • Cancelreply