Question

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

<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网格不扩展

1 个答案: