含容器与双侧边栏的CSS布局问题：侧边栏宽度无法固定

我尝试用CSS实现上图的布局，但侧边栏（红色区域）会随内部内容自动展开，我希望侧边栏不管内部有什么内容，都保持固定宽度。

原代码：

.wrapper {
    display: flex;
}

.container {
    flex-grow: 1;
    max-width: 1024px;
    width: 100%;
}

.sidebar {
    flex-grow: 1;
    min-width: fit-content;
}

问题分析与解决 #

你的侧边栏会被内容撑开，核心原因是设置了flex-grow: 1（让侧边栏抢占剩余空间）和min-width: fit-content（强制宽度适配内容）。要实现固定宽度，只需调整以下几点：

• 移除flex-grow: 1，避免侧边栏抢占主容器以外的空间
• 添加flex-shrink: 0，确保侧边栏不会被压缩
• 设置固定的width值（比如280px），替换掉min-width: fit-content

修改后的代码：

.wrapper {
    display: flex;
}

.container {
    flex-grow: 1;
    max-width: 1024px;
    width: 100%;
}

.sidebar {
    flex-shrink: 0;
    width: 280px; /* 替换为你需要的固定宽度 */
}

如果需要侧边栏宽度适配内容但不超过上限，可以改用width: fit-content + max-width: 280px + flex-shrink: 0，但严格固定宽度的话，直接设置固定width是最可靠的方案。

内容的提问来源于stack exchange，提问作者Benjamin Sampson