Css - 宽度/高度 100%，没有动态像素数量

Question

如何将元素的宽度设置为其父元素的 width 减去兄弟元素的未知 width 的 100%。

index.html

<div class="main">
  <div class="sidemenu">
    ...
  </div>
  <div class="contant">
    ...
  </div>
</div>

样式.css

.main
{
  width: 100vw;
}

.sidemenu
{
  width: X; /* this value is dymanic, it may change in runtime using JS */
}

.contant
{
  width: ???; /* what do I put here? */
}

如果侧边菜单的宽度是固定的，我可以使用 calc(100% - X)，但由于宽度是动态的，我如何设置宽度以获取 parent ？
我可以仅使用 Css(不使用 JavaScript)来实现吗？

Answer 1

您可以使用flexbox，因此无需为content 区域分配特定宽度

例如

.main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.content { flex: 1; margin-left: 1rem; }

Codepen demo