我想要实现的目标:
使用CSS网格布局,使页面具有正确的列,其大小是从其内容派生的,但最多只能占窗口宽度的20%.
我怎么认为它会起作用:
div {
border-style: solid;
}
#container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 1fr minmax(auto, 20%);
}<div id="container">
<div>
some content
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
</div>
</div>它看起来不错,但是当我删除第二个内容时div,左列不会崩溃:
div {
border-style: solid;
}
#container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 1fr minmax(auto, 20%);
}<div id="container">
<div>
some content
</div>
<div></div> …