我一直试图把我的头缠在CSS网格上。在此示例中,为什么外部网格没有增长到内部网格的大小?如何解决此布局?
.scroll {
width: 200px;
overflow: auto;
}
.wrapper {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 2px;
margin: 1rem;
}
.grid {
display: inline-grid;
grid-template-columns: auto auto;
grid-column-gap: 1em;
}
<div class="scroll">
<div class="wrapper">
<div class="grid">
<p>Grid:</p>
<div class="grid">
<p>text here</p>
<p>verylongtextherewithoutanybreakingoptions</p>
</div>
</div>
</div>
</div>
答案 0 :(得分:4)
在您的示例中,您有两个网格和另外两个包装器。由于将两个栅格都制成inline-grid
,所以两个栅格都被扩展为相同的大小,但是在.wrapper
中应用box-shadow
的情况并非如此。
制作.wrapper
inline-block
,它将修复布局。
.scroll {
width: 200px;
overflow: auto;
}
.wrapper {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 2px;
margin: 1rem;
display:inline-block;
}
.grid {
display: inline-grid;
grid-template-columns: auto auto;
grid-column-gap: 1em;
}
<div class="scroll">
<div class="wrapper">
<div class="grid">
<p>Grid:</p>
<div class="grid">
<p>text here</p>
<p>verylongtextherewithoutanybreakingoptions</p>
</div>
</div>
</div>
</div>
答案 1 :(得分:1)
外部.grid
与内部.grid
始终长大。在这里固定的是.scroll