Html 如何更改CSS flex box列的宽度？

我有一个菜单div，它占据了容器高度的100%，在它旁边，右边是页眉、正文和页脚部分

我通过

CSS-flex属性

实现了这一点。但是，我想更改

“menu”

div从容器中取出的宽度量，如中所示，使其

宽度为容器宽度的10%

，并使

其余div填充剩余的

（即使

“menu”

div稍后被隐藏）

我现在所拥有的一切：

.container{
显示器：flex；
柔性流：柱包裹；
宽度：75%；
高度：500px；
位置：相对位置；
保证金：0自动；
}
.菜单{
弹性：0.100%；
背景：浅蓝色；
}
.标题{
弹性：0.10%；
背景：浅灰色；
}
.身体{
弹性：0.80%；
背景：紫色；
}
.页脚{
弹性：0.10%；
背景：浅绿色；
}

菜单
标题
身体
页脚

您必须在右列周围添加一个包装器，然后只在

菜单

元素上指定

flex basis

.container{
显示器：flex；
宽度：75%；
高度：500px；
位置：相对位置；
保证金：0自动；
高度：500px；
溢出：隐藏；
}
.右上校{
柔性流：柱包裹；
柔性生长：1；
身高：100%；
显示器：flex；
}
.菜单{
弹性基准：10%；
背景：浅蓝色；
}
.标题{
弹性：0.10%；
背景：浅灰色；
}
.身体{
弹性：0.80%；
背景：紫色；
}
.页脚{
弹性：0.10%；
背景：浅绿色；
}

菜单
标题
身体
页脚

这对你合适吗？删除“显示无”并显示生成的“显示内联”块，使其在页眉/正文/页脚上以100%宽度溢出，但溢出被隐藏，并且当菜单设置为“显示无”时，溢出不会生效。否则，flex可能不是您的答案，或者JS是必需的。嗯，问题是，如果您将文本对齐：右或文本对齐：将文本居中放置在标题div上，那么文本将关闭或完全消失（因为它将进入隐藏溢出）。比如在这里：。我猜flex Box可能不适用于此，但如果您可以在其上设置宽度和高度，不管它们是行还是列，这将是很酷的…太好了，正如预期的那样工作！我甚至没有想过要加一个包装。非常感谢。