在 Flex 100% 高度中制作空 Div

Question

使用以下我的.divider<div>没有显示。 我想这是因为它是空的。 如果我在那里添加一个"."，那么我会看到它。 是否可以在不添加内容的情况下使其100%.wrapper的height？

.wrapper {
display: flex;
background-color: orange;
}
.left {
background-color: gray;
}
.divider {
background-color: green;
cursor: ew-resize;
width: 12px;
height: 100%;
}
.right {
flex-grow: 1;
background-color: yellow;
}

<div class="wrapper">
<div class="left">Left</div>
<div class="divider"></div>
<div class="right">Right</div>
</div>

https://jsfiddle.net/sub7fxk5/

Answer 1

删除.divider的height: 100%;

.wrapper {
display: flex;
background-color: orange;
}
.left {
background-color: gray;
}
.divider {
background-color: green;
cursor: ew-resize;
width: 12px;
/* height: 100%; */
}
.right {
flex-grow: 1;
background-color: yellow;
}

<div class="wrapper">
<div class="left">Left</div>
<div class="divider"></div>
<div class="right">Right</div>
</div>

Answer 2

删除height并添加flex: 1似乎有所帮助。 下面的代码的结果是否符合您的预期？

包装器没有高度，这意味着将height设置为100%等于将height设置为0。flex: 1使项目变得灵活，即使它没有内容并且显示。 当然，您也可以设置宽度。所以width: 12px会起作用。width: 100%;也是如此(这会将左右项目推到另一侧)

还可以使用伪元素::after作为分隔符。这会稍微清理一下你的 html。

.wrapper {
display: flex;
background-color: orange;
}
.left {
background-color: gray;
}
.divider {
background-color: green;
cursor: ew-resize;
flex: 1;
}
.right {
flex-grow: 1;
background-color: yellow;
}

<div class="wrapper">
<div class="left">Left<br/><br/>Left</div>
<div class="divider"></div>
<div class="right">Right</div>
</div>