如何将 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>