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 解决此问题？

测试和重现

我在Chrome96.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>

CSS 网格自动宽度问题

CSS Grid auto width issue

css

css-grid

问题描述

测试和重现