logo标签列表

CSS网格自动宽度问题

csscss-grid
3

问题描述

我创建了一个简单的包含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;
}

您可以在屏幕上看到，如果最后一个区域包含长内容，则自动宽度的行为会中断：

enter image description here

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

测试和复现

我已在Chrome 96.0.4664.45中进行了测试。

您可以在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>

1
你能否将示例放入工作代码片段中，因为我无法重现右侧的图像。如果我将一个非常长且不可打断的字符串放入第二个区域，则会最小化第一个div，使其看起来像您“正常行为”图像的右上角部分。 - A Haworth
@a-haworth 请看这个例子：https://codepen.io/mitani-kun/pen/MWEwZpa 我在 Chrome 96.0.4664.45 中测试过了。 - Nikolay Makhonin
1个回答
2

在.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技巧，我之前不知道它。我在Chrome最新版、Firefox最新版、Edge最新版和Safari 11中测试了这个解决方案 - 它在所有浏览器中都有效。 - Nikolay Makhonin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接