css - Full height item inside wrapped flexbox grid?

Question

Is it possible to have just one item in a flexbox grid set with flex-wrap: wrap; flex-direction: row; to 100% height of it's parent?

Check out the following pen. This contains two grids, in each I would like the cells to be a consistent width, but for the second to have a full-height sidebar element. Trying to avoid having to use nested flexboes so the same cell width can be used with or without a sidebar.

https://codepen.io/louiswalch/pen/dyOGgGv?editors=1100

question from:https://stackoverflow.com/questions/66065707/full-height-item-inside-wrapped-flexbox-grid

Answer 1

You can do this with a second layer of flexboxes in a relatively straight forward fashion. Note, I created a wrapper around the second group of non-navbar cells

HTML:

<div class="no-sidebar">
  <div class="cell product"><div>Cell</div></div>  
  <div class="cell product"><div>Cell</div></div>  
  <div class="cell product"><div>Cell</div></div>  
  <div class="cell product"><div>Cell</div></div>  
  <div class="cell product"><div>Cell</div></div>  
  <div class="cell product"><div>Cell</div></div>  
  <div class="cell product"><div>Cell</div></div>  
  <div class="cell product"><div>Cell</div></div>
</div>
  
<hr/>

<div class="grid has-sidebar">
  <div class="cell sidebar"><div>Sidebar (Full height?)</div></div> 
    <div class="main-contents">
      <div class="cell product"><div>Cell</div></div>  
      <div class="cell product"><div>Cell</div></div>  
      <div class="cell product"><div>Cell</div></div>  
      <div class="cell product"><div>Cell</div></div>  
      <div class="cell product"><div>Cell</div></div>  
      <div class="cell product"><div>Cell</div></div>  
      <div class="cell product"><div>Cell</div></div>
    </div>
</div>

CSS:

HTML, BODY { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

BODY {
    padding: 30px;
}

.no-sidebar {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    .cell {
        width: 25%;
        > DIV {
            padding: 10px;
            border: 1px solid red;
        }
    }
}

.has-sidebar {
    .cell {
        > DIV {
            padding: 10px;
            border: 1px solid red;
        }
    }
    
    display: flex;
    
    .sidebar {
      display: flex;
      flex: 0 0 25%;
      align-items: stretch;
        
      > DIV {
        width: 100%;
        background-color: blue;
      }
    }
    
    .main-contents {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex: 1 0;
        .cell {
          flex: 1 0 33%;
        }
    }
}

.product {
  > DIV {
    background-color: pink;
  }
}