How do I use calc() with min-content? - html

Question

I have a grid layout which can be simplified like this.
What I want to achieve is the .side should take whatever space the content needs to by default using min-content, but user can enlarge it by increasing the --size custom css property.
I tried calc(min-content + var(--size)) but it doesn't work. I can't assign a specific value like calc(100px + var(--size)) since the original size should be determined by its content.
What is the best approach to achieve such a feature?
* {
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

Use width:calc(100% + var(--size)) for the grid item. This will create an overflow that you can rectify by adding a gap:
* {
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>