Css - 元素宽度100％减去动态像素数

Question

如何设置元素的宽度，使其父元素的宽度减去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区域指定特定宽度

e.g。

.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

在主容器中使用display: flex：

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

Answer 4

你可能寻找的方法只能使用js，否则你无法获得元素的宽度来计算它。