具有自动列的网格布局使用全宽 flex 子项调整大小

Question

我已经使用 CSS 网格布局创建了一个带有可扩展行的表格，并且一切正常，直到我在可扩展部分添加一个具有 flex 布局的元素。

可展开部分使用网格列：1/-1；并且内容不应该影响网格的其余部分，或者这就是我的想法。

我创建了一个简化版本来显示问题：

function toggle() {
  const elem = document.querySelector('.all-columns');
  if (elem.style.display === "none") {
    elem.style.display = "flex";
  } else {
    elem.style.display = "none";
  }
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 400px;
}

.row {
  display: contents;
}

.all-columns {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  background: red;
  border: 1px solid black;
}

.column {
  border: 1px solid black;
}

.flex-child {
  width: 180px;
  text-align: center;
  background: blue;
  border: 1px solid black;
}

<div class="grid-container">
  <div class="row">
    <div class="column">Row1 Column1</div>
    <div class="column">Row1 Column2 with large name</div>
    <div class="column">Row1 Column3</div>
  </div>
  <div class="row">
    <div class="all-columns">
      <div class="flex-child">1 flex</div>
      <div class="flex-child">2 flex</div>
      <div class="flex-child">3 flex</div>
      <div class="flex-child">4 flex</div>
      <div class="flex-child">5 flex</div>
    </div>
  </div>
  <div class="row">
    <div class="column">Row3 Column1</div>
    <div class="column">Row4 Column2</div>
    <div class="column">Row1 Column3</div>
  </div>
</div>
<br>
<button onclick="toggle()">Toggle expandable section</button>

如您所见，当可展开部分显示/隐藏时，中间列的大小会发生变化。

可扩展部分的内容是外部的，所以我根本无法修改它。 我已经在 Firefox 和 Chrome 中测试过，结果相同。

如果有人对此行为有解释，我将不胜感激。

谢谢。

Answer 1

将width: 0;min-width: 100%; 添加到所有列中，这样它不会有助于定义宽度并且不会影响其他元素：

function toggle() {
  const elem = document.querySelector('.all-columns');
  if (elem.style.display === "none") {
    elem.style.display = "flex";
  } else {
    elem.style.display = "none";
  }
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 400px;
}

.row {
  display: contents;
}

.all-columns {
  grid-column: 1/-1;
  width: 0;
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: red;
  border: 1px solid black;
}

.column {
  border: 1px solid black;
}

.flex-child {
  width: 180px;
  text-align: center;
  background: blue;
  border: 1px solid black;
}

<div class="grid-container">
  <div class="row">
    <div class="column">Row1 Column1</div>
    <div class="column">Row1 Column2 with large name</div>
    <div class="column">Row1 Column3</div>
  </div>
  <div class="row">
    <div class="all-columns">
      <div class="flex-child">1 flex</div>
      <div class="flex-child">2 flex</div>
      <div class="flex-child">3 flex</div>
      <div class="flex-child">4 flex</div>
      <div class="flex-child">5 flex</div>
    </div>
  </div>
  <div class="row">
    <div class="column">Row3 Column1</div>
    <div class="column">Row4 Column2</div>
    <div class="column">Row1 Column3</div>
  </div>
</div>
<br>
<button onclick="toggle()">Toggle expandable section</button>