问题描述
我创建了一个简单的包含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](https://istack.dev59.com/0bDta.webp)
如何仅使用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>