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

The parent doesn't currently have a defined height, so setting `height: 100%` doesn't mean anything to the child. You either have to define the height of the parent using real units, or define the child's height using real units. If you try changing it to `height: 100px` you can see the height change — Robin, Feb 05 '21 at 15:21
The height of the parent is based on it's contents, it can't have a fixed height (nor the sidebar). Hoping that it's possible to do something with flex stretch, but while still keeping it wrap row. — Louis W, Feb 05 '21 at 17:07
Is the ideal experience you have the tall one on the left side with the remaining seven to the right of it? — Robin, Feb 05 '21 at 18:49

score 0 · Answer 1 · answered Feb 05 '21 at 19:18

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

Thanks, I was really hoping to avoid nested containers, to keep things simple for the logic of outputting a grid with or without a sidebar. Can you think of any way to tell the sidebar to stretch full height while remaining along side the cells? — Louis W, Feb 05 '21 at 19:46
https://stackoverflow.com/questions/38351887/large-first-item-with-a-flexbox-layout Based on the comments from this question, it doesn't seem like there's a way to have a grid layout using flexbox in this fashion without nesting — Robin, Feb 05 '21 at 21:31

Full height item inside wrapped flexbox grid?

1 Answers1