包裹的flexbox网格内的全高项目？答案

【问题标题】：Full height item inside wrapped flexbox grid?包裹的flexbox网格内的全高项目？
【发布时间】：2021-05-09 22:31:54
【问题描述】：

是否可以在 flexbox 网格中仅将一个项目设置为 flex-wrap: wrap; flex-direction: row; 到其父项的 100% 高度？

看看下面的笔。这包含两个网格，在每个网格中，我希望单元格具有一致的宽度，但第二个网格具有全高侧边栏元素。尽量避免使用嵌套的 flexboes，以便在有或没有侧边栏的情况下使用相同的单元格宽度。

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

【问题讨论】：

父级当前没有定义高度，因此设置height: 100% 对子级没有任何意义。您要么必须使用实数单位定义父项的高度，要么使用实数单位定义子项的高度。如果您尝试将其更改为height: 100px，您可以看到高度变化
父级的高度取决于它的内容，它不能有固定的高度（也不能是侧边栏）。希望可以用 flex 拉伸做一些事情，但同时仍然保持它的 wrap 行。
理想的体验是左边高个，右边七个？

标签： css flexbox

【解决方案1】：

您可以使用第二层弹性盒以相对简单的方式做到这一点。请注意，我在第二组非导航栏单元格周围创建了一个包装器

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

【讨论】：

谢谢，我真的希望避免嵌套容器，以简化输出带有或不带有侧边栏的网格的逻辑。你能想出任何方法来告诉侧边栏在保持单元格旁边的同时拉伸整个高度吗？
stackoverflow.com/questions/38351887/… 根据这个问题的 cmets，似乎没有办法在不嵌套的情况下以这种方式使用 flexbox 进行网格布局