如何阻止父div被子元素撑开，实现子元素溢出时显示横向滚动条？

问题原因 #

你遇到的是flex布局默认特性导致的问题，核心有两点：

• flex容器的直接子项默认min-width: auto，会优先根据内容宽度调整自身尺寸，就算设置了width: 100%也会被内部过宽的内容撑开。
• 原有样式缺少关键限制，且CSS基础语法存在单位缺失、符号错误的问题。

具体修改点 #

1. 修复CSS语法问题：补全所有宽度的px单位，将属性分隔的逗号改为分号，移除类名后的多余冒号。
2. 给.maincontent添加min-width: 0，打破flex子项默认的内容宽度优先规则，强制遵守设置的宽度限制。
3. 给需要出现滚动条的.child容器添加overflow-x: auto，溢出时自动出现横向滚动条。
4. 移除.childlist的固定宽度百分比设置，让它的宽度由内部子元素的总宽度自然撑开。
5. 给.btn添加flex-shrink: 0，避免按钮在空间不足时被压缩宽度。

原有HTML/JSX结构无需修改，仅调整CSS即可实现需求，修改后完整CSS代码如下：

.app {
  display: flex;
  width: 100vw;
  height: 100vh;
}
.navbar {
  display: flex;
  flex-direction: column;
  width: 112px;
}
.maincontent {
  display: flex;
  width: 100%;
  min-width: 0;
}
.child {
  width: 100%;
  overflow-x: auto;
}
.childlist {
  display: flex;
  flex-wrap: nowrap;
}
.btn {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}

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