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

Question

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

index.html

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

style.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)，但由于宽度是动态的，我如何设置宽度以获取父级的剩余宽度？
我可以仅使用 Css（不使用 JavaScript）来实现这一点吗？

Answer 1

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

例如

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

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

Codepen demo

Answer 2

我知道这是一篇旧帖子，但这也可以使用 css 变量来完成。

:root {
  --dynamic-width: X;
}
.content {
  width: CALC(100% - var(--dynamic-width));
}

见：https://jsfiddle.net/wzget15m/

Answer 3

您可能要寻找的方法只能使用 js，否则您无法获取元素的宽度以与另一个计算它。

Answer 4

在主容器中使用display: flex：

    .main {
        display: flex;
    } 
    .sidemenu {
        width: X;
    } 
    .contant {
        width: 100%; /* what do I put here? */ 
    }