如何仅在Flex中用CSS相等地分隔空div？

Question

因此，我的结构与下面的代码段非常相似。 我遇到的问题是，我正在努力使div（例如child相对于容器始终处于相同的高度，即使它们为空。 因此，如果有两个孩子，则必须有父母的50％；如果有三个孩子，则必须占父母的33.3％。 做了很多挖掘工作，尝试使用flex-grow并将其设置在子级上，如果childContent类为空但空子级仍然折叠，则在childContent类上添加一个after内容。 甚至可以在不使用js和固定高度的情况下在子级上达到相等的高度，如果可以，如何实现？

 .container { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: auto; } .child { height: 100%; display: flex; flex-direction: column; } .childHeader { display: flex; flex-direction: row; } .headerItem { background-color: red; } .childContent { background-color: white; } .childContent:empty:after { content: '.'; visibility: hidden; min-height: 300px; } .contentItem { background-color: skyblue; border: 3px solid black; } 

 <div class="container"> <div class="child"> <div class="childHeader"> <div class="headerItem">1</div> <div class="headerItem">2</div> <div class="headerItem">3</div> <div class="headerItem">4</div> <div class="headerItem">5</div> <div class="headerItem">6</div> <div class="headerItem">7</div> </div> <div class="childContent"> <div class="contentItem">1</div> <div class="contentItem">2</div> <div class="contentItem">3</div> <div class="contentItem">4</div> <div class="contentItem">5</div> <div class="contentItem">6</div> <div class="contentItem">7</div> </div> </div> <div class="child"> <div class="childHeader"> <div class="headerItem">1</div> <div class="headerItem">2</div> <div class="headerItem">3</div> <div class="headerItem">4</div> <div class="headerItem">5</div> <div class="headerItem">6</div> <div class="headerItem">7</div> </div> <div class="childContent"> </div> </div> <div class="child"> <div class="childHeader"> <div class="headerItem">1</div> <div class="headerItem">2</div> <div class="headerItem">3</div> <div class="headerItem">4</div> <div class="headerItem">5</div> <div class="headerItem">6</div> <div class="headerItem">7</div> </div> <div class="childContent"> </div> </div> </div> 

Answer 1

检查一下，我不确定这是否是您想要的。
我刚刚添加了min-height: calc(100vh - 60px); 在您的.childContent

 .container { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: auto; } .child { display: flex; flex-direction: column; } .childHeader { display: flex; flex-direction: row; } .headerItem { display:flex; flex-basis:100%; background-color: red; } .childContent { background-color: grey; position: relative; display: block; min-height: calc(80vh - 60px); } .childContent:empty::after { content: '.'; visibility: hidden; } .contentItem { background-color: skyblue; border: 3px solid black; } 

 <div class="container"> <div class="child"> <div class="childHeader"> <div class="headerItem">1</div> <div class="headerItem">2</div> <div class="headerItem">3</div> <div class="headerItem">4</div> <div class="headerItem">5</div> <div class="headerItem">6</div> <div class="headerItem">7</div> </div> <div class="childContent"> <div class="contentItem">1</div> <div class="contentItem">2</div> <div class="contentItem">3</div> <div class="contentItem">4</div> <div class="contentItem">5</div> <div class="contentItem">6</div> <div class="contentItem">7</div> </div> </div> <div class="child"> <div class="childHeader"> <div class="headerItem">1</div> <div class="headerItem">2</div> <div class="headerItem">3</div> <div class="headerItem">4</div> <div class="headerItem">5</div> <div class="headerItem">6</div> <div class="headerItem">7</div> </div> <div class="childContent"> </div> </div> <div class="child"> <div class="childHeader"> <div class="headerItem">1</div> <div class="headerItem">2</div> <div class="headerItem">3</div> <div class="headerItem">4</div> <div class="headerItem">5</div> <div class="headerItem">6</div> <div class="headerItem">7</div> </div> <div class="childContent"> </div> </div> </div> 

检查一下这个https://developer.mozilla.org/en-US/docs/Web/CSS/calc