我有两个兄弟元素,每个元素都包含动态内容.
在某些情况下sibling-1会有更多内容sibling-2,反之亦然.我希望第二个元素sibling-2的高度始终等于第一个元素的高度sibling-1.如果高度sibling-2大于那么sibling-1它的高度将溢出flexdiv,因此可以滚动.
有没有办法用Flexbox实现这一目标？
对的,这是可能的.离开的兄弟单独设置的最大高度,并设置了别人的flex-basis: 0和flex-grow: 1,而根据该规范将其扩展到他们的兄弟姐妹的高度.没有绝对的定位.没有任何元素的设置高度.
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;
}
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
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
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
有没有办法用Flexbox实现这一目标？
基本上没有.柔性相等高度特征基于容器的高度,而不是任何特定的兄弟.
所以sibling-1并且sibling-2可以始终保持相同的高度.
但是flexbox没有内置机制来将项目的高度限制为一个兄弟的高度.
考虑JavaScript或CSS定位属性.
以下是使用绝对定位的示例:
.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
京公网安备 11010802040832号 | 京ICP备19059560号-6 