<分区>
<分区>
我有一个子网格元素溢出问题。考虑下面的代码，subgrid中的第二个元素被overflow-wrap禁止溢出。这行得通，但是 Gri 容器并没有增加大小来使网格元素适合，而是流入了子网格的第三项。 我该如何防止这种情况发生？
<html>
<style type="text/css">
body {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.layout {
width: 100%;
display: grid;
grid-template-columns: 20% 80%;
grid-template-rows: 100%;
box-sizing: border-box;
}
.left {
width: 100%;
grid-column-start: 1;
grid-column-end: 1;
box-sizing: border-box;
word-wrap: break-word;
}
.right {
width: 100%;
grid-column-start: 2;
grid-column-end: 2;
box-sizing: border-box;
}
.container {
box-sizing: border-box;
margin-left: 4px;
margin-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 1px solid black;
overflow-wrap: break-word;
}
.container:last-child {
padding-bottom: 4px;
border-bottom: none;
}
.grid {
display: grid;
grid-template-columns: minmax(auto, 80%) auto;
grid-template-rows: 100%;
}
.col1 {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 1;
justify-self: left;
align-self: start;
}
.col2 {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 1;
justify-self: right;
align-self: start;
}
</style>
<body>
<div class="layout">
<div class="left">
test
</div>
<div class="right">
<div class="container grid">
<div class="col1">
<p>TEST</p>
</div>
<div class="col2">
<p>test</p>
</div>
</div>
<div class="container grid">
<div class="col1">
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
</div>
<div class="col2">
<p>test</p>
</div>
</div>
<div class="container grid">
<div class="col1">
<p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
</div>
<div class="col2">
<p>test</p>
</div>
</div>
<div class="grid">
<div class="col1">
<p>TEST</p>
</div>
<div class="col2">
<p>test</p>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
想通了。子网格实际上需要定义为display: subgrid。
关于html - CSS子网格元素溢出问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50451683/