【发布时间】：2021-12-03 07:49:05
【问题描述】：
问题描述
我创建了一个包含 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>【问题讨论】：
-
您能否将示例放入您的问题中，因为我无法重现右手图像。如果我将一个非常长的牢不可破的字符串放入第二个区域，那么它会最小化第一个 div，因此它看起来像您的“正常行为”图像的右上角。
-
@a-haworth 在此处查看示例：codepen.io/mitani-kun/pen/MWEwZpa 我在 Chrome 96.0.4664.45 中对其进行了测试