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

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

index.html 如果侧菜单宽度是固定的，我可以使用

calc（100%-X）

，但是由于宽度是动态的，我如何设置宽度以获得父菜单的剩余宽度？

---

我可以仅使用Css（不使用JavaScript）来实现这一点吗？

您可以使用

flexbox

，因此无需为

内容

区域指定特定的宽度

e、 g

---

在主容器中使用

display:flex

：

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

---

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

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

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

---

请参阅：

只是想知道，

宽度：自动不起作用？@Ylama-Nop，我希望这不会起作用，内容会从屏幕上溢出宽度：100vw；对于div.main，我删除了这段代码。这并不能解决问题，正如我在问题中提到的-大小栏的大小是动态的，因此我不能使用固定值，比如12pxOP事先不知道从100%中减去多少。@GilEpshtain Only display:flex就足够了，否则，默认情况下其弹性方向：列而非列，弹性换行：nowrap。@VXp默认情况下弹性方向设置为行。我说的是弹性换行。@VXp请重新插入弹性方向，谢谢。@VXp-如果回答者回滚您的编辑并要求您停止，请听他们的。不要试图把你自己的解释强加给别人的答案。如果你想写你自己的答案，尽管写吧。
.main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

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

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

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