Sibling items are limited in size in flex/grid layout

Question

I have two sibling elements, each containing dynamic content. &lt;divclass="flex"&gt;&lt;divclass="sibling-1"&gt;&lt;/div&gt;&lt;divclass="sibling-2"&gt;&lt;/div&gt;&l

P粉322918729 · Answer

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


  text
text
text
text
text
text

  text
text
text
text
text
text
text
text
text
text
text
text
text

jsFiddle

P粉008829791 · Answer

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


  
    我更长，会滚动溢出。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中
      在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在
  

  
    每个父节点的兄弟节点与我的高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中
  

  
    我虽然较短，但仍然与高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中