html - 弯曲最后一行以占用可用的垂直空间

Question

我有这种布局，其中一个换行 flex 容器有一个宽度为 100% 的第一个子元素，第二行还有 2 个子元素。容器有一个固定的高度，第一个孩子（Filters下面的块）是可折叠的（即有 2 个可能的高度值）。
我希望最后一行的块在所有情况下都采用所有可用高度（filters块折叠或展开），但我找不到解决方案。

我尝试了各种高度组合，对齐项目/对齐自我：拉伸，但无济于事。将 pdt/list 块高度设置为 100% 使它们有效地成为父容器的 100%，因此它们由于过滤器而溢出。
我知道我可以通过制作第一个容器 flex 列并用 flex 行放入第二个容器来实现它，但如果可能的话，我想保留当前标记。任何想法？

JSfiddle：https ://jsfiddle.net/Lp4j6cfw/34/

HTML

<div id="lp-tag">
  <div id="header">HEADER</div>
  <div id="lp-ctnr">
    <div id="filters" onclick="toggle()">FILTERS</div>
    <div id="pdt">PDT</div>
    <div id="list">LIST</div>
  </div>

CSS

#lp-tag{
  display: flex;
  flex-flow: column nowrap;
  width: 350px;
  margin: auto;
  border: 1px solid red;
  height: 250px;
}
#header{
  background: lightblue;
  height: 80px;
}
#lp-ctnr{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: stretch;
  border: 1px solid green;
  flex: 1;
}
#filters{
  width: 100%;
  background: lightgreen;
  height: 45px;
}
.close{
  height: 20px !important;
}
#pdt, #list {
  flex: 1;
  border: 1px solid blue;
  text-align: center;
  align-self: stretch;

}
#pdt{
  background: yellow;  
}
#list{
  background: pink;
}

标签： htmlcssflexbox

Answer 1

如果您对其他布局方法持开放态度，我会推荐 CSS-Grid

.lp-tag {
  width: 250px;
  margin: 1em auto;
  border: 1px solid red;
  height: 250px;
  display: inline-grid;
  grid-template-rows: auto 1fr;
}

.header {
  background: lightblue;
  height: 80px;
}

.header.small {
  height: 40px;
}

.lp-ctnr {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid green;
  flex: 1;
}

.filters {
  grid-column: 1 / span 2;
  background: lightgreen;
  height: 45px;
}

.filters.large {
  height: 80px;
}

.pdt,
.list {
  border: 1px solid blue;
  text-align: center;
}

.pdt {
  background: yellow;
}

.list {
  background: pink;
}

<div class="lp-tag">
  <div class="header">HEADER</div>
  <div class="lp-ctnr">
    <div class="filters" onclick="toggle()">FILTERS</div>
    <div class="pdt">PDT</div>
    <div class="list">LIST</div>
  </div>
</div>

<div class="lp-tag">
  <div class="header small">HEADER</div>
  <div class="lp-ctnr">
    <div class="filters large" onclick="toggle()">FILTERS</div>
    <div class="pdt">PDT</div>
    <div class="list">LIST</div>
  </div>
</div>