设置display:flex的.top-level-section表现为inline元素，子元素溢出父容器求助

你遇到的问题是：给带有top-level-section类的<section>设置display:flex后，它却表现得像inline元素，当子元素添加padding时，会溢出id为main的父div容器，且从零构建div嵌套section的结构时无法复现该问题。

原因分析 #

• flex容器默认在主轴方向的宽度由内容决定，若未明确设置让它占满父容器可用宽度，当子元素的padding加上内容宽度超过父容器时，就会出现溢出。
• 可能存在浏览器默认样式干扰，比如<section>自带的margin/padding，或者父容器#main未设置box-sizing: border-box，导致计算宽度时未将padding、border纳入总宽度，进一步加剧溢出问题。

解决方法 #

方案一：让flex容器占满父容器宽度 #

给top-level-section添加宽度设置，确保它完全占据父容器的可用宽度：

.top-level-section {
  display: flex;
  width: 100%;
}

方案二：给父容器添加溢出处理 #

如果希望父容器限制子元素的溢出范围，可给#main添加溢出控制：

#main {
  overflow: auto; /* 需隐藏溢出则用overflow: hidden，按需选择 */
}

方案三：统一全局盒模型 #

给所有元素设置box-sizing: border-box，让元素的padding、border都包含在自身宽度内，避免宽度计算混乱：

* {
  box-sizing: border-box;
}

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