在 Flex 100% 高度中制作空 Div

Question

使用以下我的.divider <div>沒有顯示。 我想這是因為它是空的。 如果我添加一個“。” 在那里，然后我看到了。 是否可以在不添加內容的情況下使其.wrapper的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>

https://jsfiddle.net/sub7fxk5/

Answer 1

刪除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>

Answer 2

移除height: 100%; 對於.divider

 .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>