嵌套的 flexbox 网格不扩展

Question

我很难使嵌套的 flexbox 展开以填充其父单元格的大小。这两个子单元格应该长到其父单元格高度的 1/3，但是它们占用的空间尽可能少 space。我想解决这个问题，但不知道如何解决。

<div class="grid">
<div class="cell blue">
    <p> This is a test grid, it is very tall <br> This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br>This is a test grid, it is very tall <br> </p>
</div>
<div class="cell green">
    <p> This is also a test grid, equally tall</p>
</div>
<div class="cell subgrid red">
    <div class="subcell">
        <p>This is a subcell, it should take up 33% if</p>
    </div>
    <div class="subcell">
        <p>this is another subcell, should be small and vertical</p>
    </div>
    <div class="subcell deepgrid">
        <div class="deepcell">
            <p>deep grid 1</p>
        </div>
        <div class="deepcell">
            <p>Deep grid 2</p>
        </div>
        <div class="deepcell">
            <p>Deep grid 3</p>
        </div>
    </div>
</div>

.grid { display: flex; justify-content: center; text-align: center; }
.cell { flex: 1; }
.sub-grid { display: flex; }
.sub-cell { flex: 1 }
.deepgrid  {display: flex; }
.deepcell { flex: 1; }
.blue {background:blue;}
.green{background:green;}
.red{background:red;}

Answer 1

问题是你使用了

.sub-grid { display: flex; }
.sub-cell { flex: 1 }

但是，在 HTML 中，您使用了类 subgrid 和 subcell。

此外，您还应该添加 flex-direction 以将子单元格排列在一列中。

因此，您应该使用

.subgrid {
  display: flex;
  flex-direction: column;
}
.subcell {
  flex: 1;
}

.grid {
  display: flex;
  justify-content: center;
  text-align: center;
}
.cell {
  flex: 1;
}
.subgrid {
  display: flex;
  flex-direction: column;
}
.subcell {
  flex: 1
}
.deepgrid {
  display: flex;
}
.deepcell {
  flex: 1;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.red {
  background: red;
}

<div class="grid">
  <div class="cell blue">
    <p>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>This is a test grid, it is very tall
      <br>
    </p>
  </div>
  <div class="cell green">
    <p>This is also a test grid, equally tall</p>
  </div>
  <div class="cell subgrid red">
    <div class="subcell">
      <p>This is a subcell, it should take up 33% if</p>
    </div>
    <div class="subcell">
      <p>this is another subcell, should be small and vertical</p>
    </div>
    <div class="subcell deepgrid">
      <div class="deepcell">
        <p>deep grid 1</p>
      </div>
      <div class="deepcell">
        <p>Deep grid 2</p>
      </div>
      <div class="deepcell">
        <p>Deep grid 3</p>
      </div>
    </div>
  </div>
</div>

嵌套的 flexbox 网格不扩展

Nested flexbox grid not expanding

html

css

flexbox