Question

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

我尝试过各种高度组合，align-items / align-self：stretch，无济于事。将pdt / list blocks height设置为100％会使它们成为父容器的100％，因此它们会因过滤器而溢出我知道我可以通过制作第一个容器flex列并使用flex row投入第二个来实现它，但是如果可能的话我想保留当前的标记。有什么想法吗？

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;
}

Answer 1

这是我在没有中间容器的情况下可以看到的唯一解决方案。 https://jsfiddle.net/5j38ouvs/

但是，我可能会像Nandita那样添加一个像这里的周围容器：https://jsfiddle.net/8md4oyLx/

CSS

#lp-ctnr{
  display: flex;
  flex-direction: column;
  border: 1px solid green;
  height: 550px;
  width: 350px;
  margin: auto;
}
#filters{
  width: 100%;
  background: lightgreen;
}
.close{
  height: 20px !important;
}

#pdt{
  flex-grow: 1;
  background: yellow;  
}
#list{
  flex-grow: 1;
  background: pink;
}

.list-container {
  flex-grow: 1;
  border: 1px solid blue;
  text-align: center;
  display: flex;
  flex-direction: row;
}

HTML

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

Answer 2

如果您对替代布局方法持开放态度，我建议使用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>

Flex最后一行以获取可用的垂直空间

2 个答案: