flex: 100%为何无法让flex容器中的侧边栏占满宽度？

兄弟，我来帮你捋清楚这个问题哈～你现在踩的坑，核心是对flex属性的缩写规则和flex布局的工作逻辑理解有点偏差，咱们一步步拆解：

问题根源1：flex: 100%不是你想的那样 #

flex是flex-grow、flex-shrink、flex-basis这三个属性的缩写，当你只写一个百分比值时，这个值会被解析为**flex-basis（元素的初始宽度）**，而flex-grow和flex-shrink会默认设为1。换句话说，你的.sidebar实际等效于：

.sidebar {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
}

这意味着每个侧边栏的初始宽度就等于容器的宽度（1500px），但你容器里塞了三个子元素：两个侧边栏+一个<p>，总初始宽度直接超出容器，这时候flex-shrink:1就会自动生效，把三个元素按比例缩小来适配容器宽度，所以侧边栏自然就变得窄窄的了。

问题根源2：justify-content: center雪上加霜 #

你给容器设置了justify-content: center，这会让缩小后的三个子元素在容器里居中排列，进一步让你感觉侧边栏“只占了很小一部分空间”。

给你两个解决方案，看你需求选： #

场景1：左右侧边栏固定宽度，中间内容占满剩余空间（常见布局）

把侧边栏设为固定宽度，禁止缩放，让中间的<p>去占剩余空间：

.container {
  border: 2px solid black;
  width: 1500px;
  height: 700px;
  margin: 40px auto;
  display: flex;
  /* 去掉justify-content:center，让子元素默认从左到右排列 */
}
.sidebar {
  background-color: palevioletred;
  /* 固定宽度200px，flex:0 0 宽度 表示不放大、不缩小、初始宽度为设置值 */
  flex: 0 0 200px;
}
p {
  background-color: darkseagreen;
  margin: 0px;
  /* flex:1 表示占满所有剩余空间 */
  flex: 1;
}

场景2：每个侧边栏单独占满容器宽度（垂直排列）

如果你的需求是让侧边栏和<p>上下排列，每个元素占满宽度，那修改容器的排列方向即可：

.container {
  border: 2px solid black;
  width: 1500px;
  height: 700px;
  margin: 40px auto;
  display: flex;
  /* 改为垂直排列 */
  flex-direction: column;
}
.sidebar {
  background-color: palevioletred;
  /* flex:1 让侧边栏占满容器的可用高度，宽度默认100% */
  flex: 1;
}
p {
  background-color: darkseagreen;
  margin: 0px;
  /* 可以给p设置不同的比例，比如flex:2让它占两倍高度 */
  flex: 2;
}

内容来源于stack exchange