Flex last row to take available vertical space

Question

I have this layout, where a row wrap flex container has a first child with 100% width and 2 more children on the second row. The container has a fixed height and the first child (Filters block below) is collapsible (i.e. has 2 possibles values for height).
I would like the blocks on the last line to take all available height in all cases (filters block collapsed or expanded), but I can't find a solution.

I've tried various combinations of height, align-items/align-self: stretch, to no avail. Setting the pdt/list blocks height to 100% makes them effectively 100% of parent container, so they overflow due to the filters.
I know I could achieve it by making the first container flex column and throw in a second one with flex row,but I'd like to keep the current markup if possible. Any idea?

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

I gave this answer today only, please refer it in the link i gave above — Nandita Sharma, Jun 14 '18 at 07:54
Yeah I mentioned that in my question; but I was hoping for a solution without adding an intermediary container. — Antoine, Jun 14 '18 at 08:01

score 1 · Answer 1 · answered Jun 14 '18 at 09:02

If you are open to alternative layout methods, I'd recommend 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>

I thought of using this, but I'm worried about IE11 support for grid layout. — Antoine, Jun 14 '18 at 09:18

mahval · Answer 2 · 2018-06-14T09:12:05.800

This is the only solution I can see without an intermediary container. https://jsfiddle.net/5j38ouvs/

However, I would probably do like Nandita and add a surrounding container like here: 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>

close, but the blocks don't fill all available space when the filters block is collapsed. Also, isn't `flex-direction:column` and `flex-flow: row` problematic? — Antoine, Jun 14 '18 at 08:59
Check my update @Antoine . Would encourage you to do surround your elements in a container, makes everything easier. — mahval, Jun 14 '18 at 09:02

Flex last row to take available vertical space

2 Answers2