使用Flex布局时Div元素溢出Body的问题排查求助

嘿，我一眼就揪出问题根源了——你的CSS选择器没有限定作用范围，导致匹配到了错误的元素！

核心问题：选择器匹配错误 #

你写的 div:nth-child(1) 是全局选择器，它的逻辑是：匹配所有父元素下的第一个子元素，且该元素是div。在你的HTML结构里，<body> 的第一个子元素就是 .containerFlex 这个Flex容器本身，所以这个选择器实际选中的是容器，而非容器内部的第一个子div！同理，div:nth-child(2) 在这里根本找不到匹配的元素（因为body下只有一个div子元素），所以容器里的两个子div压根没被设置背景色，你看到的aqua背景其实是容器本身的。

至于你说的“第一个div溢出到body外部”，大概率是把容器误当成了内部子div。在你的示例代码里，Flex容器默认是block级元素，宽度会占满body，本身不会溢出；但如果后续子元素内容过多，默认Flex布局不会自动换行，可能会撑破容器，但当前问题的核心还是选择器的误用。

修正后的代码 #

要正确选中容器内部的子div，需要给选择器加上容器类名作为前缀，限定作用范围：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.2%;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}
.containerFlex {
  display: flex;
  flex-direction: row;
}
/* 限定在.containerFlex容器内的子div */
.containerFlex div:nth-child(1) {
  background-color: aqua;
}
.containerFlex div:nth-child(2) {
  background-color: lightcoral;
}

额外小提示 #

• 如果你想只针对div类型的子元素排序（忽略父元素内的非div子元素），可以用 nth-of-type(1)，比如 .containerFlex div:nth-of-type(1)，匹配逻辑会更精准。
• 默认Flex布局下 flex-direction: row 是默认值，其实可以省略这个属性；如果想让子元素平分容器宽度，给子元素加上 flex: 1 即可。

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