我如何使用calc()与min-content?

Question

我有一个网格布局，可以这样简化。

我想要实现的是.side应该占用内容默认使用min-content所需的任何空间，但用户可以通过增加--size自定义css属性来扩大它。

我尝试了calc(min-content + var(--size))，但它不起作用。我不能指定一个特定的值，如calc(100px + var(--size))，因为原始大小应该由其内容决定。

实现这种特性的最佳方法是什么?

* {
box-sizing: border-box;
}
body {
overflow: hidden;
margin: 0;
}
.container {
--size: 10px;
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas: 
"l t"
"l b";

/* doesn't work */
/* grid-template-columns: calc(min-content + var(--size)) 1fr; */

grid-template-columns: min-content 1fr;
grid-template-rows: 1fr 1fr;
}
.container > * {
border: solid 1px black;
}
.side {
grid-area: l;
}
.top {
grid-area: t;
}
.bottom {
grid-area: b;
}

<section class="container">
<div class="side">This should have a 10px gutter on the right</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</section>

Answer 1

使用width:calc(100% + var(--size))作为网格项。这将产生溢出，您可以通过添加间隙来纠正:

* {
box-sizing: border-box;
}
body {
overflow: hidden;
margin: 0;
}
.container {
--size: 20px;
height: 100vh;
display: grid;
grid-template-areas: 
"l t"
"l b";

/* doesn't work */
/* grid-template-columns: calc(min-content + var(--size)) 1fr; */

grid-template-columns: min-content 1fr;
grid-template-rows: 1fr 1fr;
column-gap:var(--size);
}
.container > * {
border: solid 1px black;
}
.side {
grid-area: l;
width:calc(100% + var(--size));
}
.top {
grid-area: t;
}
.bottom {
grid-area: b;
}

<section class="container">
<div class="side">This should have a 10px gutter on the right</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</section>