CSS 网格自动宽度问题

Question

问题描述

我创建了一个包含 3 个区域的简单网格。最后一个区域延伸到整个网格。我希望这个区域不会影响第一和第二区域的自动宽度行为。

<div class="grid">
    <div class="item item--1">ooo</div>
    <div class="item item--2">ooo</div>
    <div class="item item--3">oooooooo oooooooo oooooooo oooooooo oooooooo oooooooo ooooooo ooooooo ooooooo</div>
</div>

.item--1 {
  grid-area: a1;
}
.item--2 {
  grid-area: a2;
}
.item--3 {
  grid-area: a3;
}

.grid {
  width: 300px;
  display: grid;
  grid-template-areas:
    "a1 a2"
    "a3 a3";
  border: 1px solid black;
  overflow: hidden;
}

您可以在屏幕中看到，如果最后一个区域包含长内容，它会自动限制宽度行为:

如何仅使用 CSS 解决此问题？

测试和重现

我在 Chrome 96.0.4664.45 中测试过

您可以查看并重现此问题 in CodePen ，或在下面的代码中:

.tests {
  display: flex;
  font-family: Arial;
}
.test {
  display: flex;
  flex-direction: column;
}
.title {
  font-weight: bold;
}

.grids {
  display: flex;
  flex-wrap: wrap;
}

.item {
  border: 1px solid black;
  margin: 0 -1px -1px 0;
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item--1 {
  grid-area: a1;
}
.item--2 {
  grid-area: a2;
}
.item--3 {
  grid-area: a3;
}

.grid {
  width: 300px;
  display: grid;
  grid-template-areas:
    "a1 a2"
    "a3 a3";
  border: 1px solid black;
  overflow: hidden;
}

<div class="tests">
  <div class="test">
    <div class="title">Normal behavior:</div>
    <div class="grids">
      <div class="grid">
        <div class="item item--1">ooo</div>
        <div class="item item--2">ooo</div>
        <div class="item item--3">oooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">ooo</div>
        <div class="item item--2">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--3">oooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--2">ooo</div>
        <div class="item item--3">oooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--2">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--3">oooooooo</div>
      </div>
    </div>
  </div>

  <div class="test">
    <div class="title">Issue (the second row broke auto width):</div>
    <div class="grids">
      <div class="grid">
        <div class="item item--1">ooo</div>
        <div class="item item--2">ooo</div>
        <div class="item item--3">oooooooo oooooooo oooooooo oooooooo oooooooo oooooooo ooooooo ooooooo ooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">ooo</div>
        <div class="item item--2">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--3">oooooooo oooooooo oooooooo oooooooo oooooooo oooooooo ooooooo ooooooo ooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--2">ooo</div>
        <div class="item item--3">oooooooo oooooooo oooooooo oooooooo oooooooo oooooooo ooooooo ooooooo ooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--2">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--3">oooooooo oooooooo oooooooo oooooooo oooooooo oooooooo ooooooo ooooooo ooooooo</div>
      </div>
    </div>
  </div>
</div>

Answer 1

在 .item--3 上使用 width:0;min-width:100%;。该元素不会影响宽度计算 (width:0)，但会保持全宽行为 (min-width:100%)

.tests {
  display: flex;
  font-family: Arial;
}
.test {
  display: flex;
  flex-direction: column;
}
.title {
  font-weight: bold;
}

.grids {
  display: flex;
  flex-wrap: wrap;
}

.item {
  border: 1px solid black;
  margin: 0 -1px -1px 0;
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item--1 {
  grid-area: a1;
}
.item--2 {
  grid-area: a2;
}
.item--3 {
  grid-area: a3;
  width:0;
  min-width:100%;
}

.grid {
  width: 300px;
  display: grid;
  grid-template-areas:
    "a1 a2"
    "a3 a3";
  border: 1px solid black;
  overflow: hidden;
}

<div class="tests">
  <div class="test">
    <div class="title">Normal behavior:</div>
    <div class="grids">
      <div class="grid">
        <div class="item item--1">ooo</div>
        <div class="item item--2">ooo</div>
        <div class="item item--3">oooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">ooo</div>
        <div class="item item--2">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--3">oooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--2">ooo</div>
        <div class="item item--3">oooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--2">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--3">oooooooo</div>
      </div>
    </div>
  </div>

  <div class="test">
    <div class="title">Issue (the second row broke auto width):</div>
    <div class="grids">
      <div class="grid">
        <div class="item item--1">ooo</div>
        <div class="item item--2">ooo</div>
        <div class="item item--3">oooooooo oooooooo oooooooo oooooooo oooooooo oooooooo ooooooo ooooooo ooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">ooo</div>
        <div class="item item--2">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--3">oooooooo oooooooo oooooooo oooooooo oooooooo oooooooo ooooooo ooooooo ooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--2">ooo</div>
        <div class="item item--3">oooooooo oooooooo oooooooo oooooooo oooooooo oooooooo ooooooo ooooooo ooooooo</div>
      </div>
      <div class="grid">
        <div class="item item--1">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--2">oooooooooooooooooooooooooooooooo</div>
        <div class="item item--3">oooooooo oooooooo oooooooo oooooooo oooooooo oooooooo ooooooo ooooooo ooooooo</div>
      </div>
    </div>
  </div>
</div>