如何让Flex子元素横向滚动，避免父元素及<body>溢出

一、修复内容区域横向滚动问题 #

原代码中.container缺少宽度约束，导致内部超长文本直接撑大容器，进而让整个父元素溢出视口。只需给.container添加overflow: hidden，同时明确文本元素的横向滚动规则：

<div class="content">
  <div class="sidebar">sidebar</div>
  <div class="container">
    <p>
      how can I make this element stop making its parent overflow and have its own X axis scrollbar // how can I make this element stop making its parent overflow and have its own X axis scrollbar // how can I make this element stop making its parent overflow and have its own X axis scrollbar
    </p>
  </div>
</div>

<style>
.content {
  display:flex;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}

.sidebar {
  flex-grow: 1;
  flex-basis: 0;
  background: grey;
}

.container {
  flex-grow: 5;
  flex-basis: 0;
  margin: 0;
  background: salmon;
  /* 关键：约束容器宽度，避免被内部内容撑开 */
  overflow: hidden;
}

p {
  max-width: 100%;
  white-space: nowrap;
  /* 明确开启横向滚动 */
  overflow-x: auto;
}
</style>

二、实现侧边栏clamp(fixedminval, 1fr, fixedmaxval)效果 #

如果需要侧边栏同时满足最小宽度、最大宽度限制，且在中间区间按比例分配空间，直接用flex属性结合clamp()即可：

修改.sidebar的样式：

.sidebar {
  /* 数值可按需调整，这里设置最小200px、最大400px */
  flex: 1 1 clamp(200px, 1fr, 400px);
  background: grey;
}

• clamp(200px, 1fr, 400px)：侧边栏宽度最小200px，最大400px，当可用空间充足时按1fr比例分配。
• flex: 1 1 ...：确保侧边栏能随容器自动缩放。

如果用Grid布局实现，代码会更直观：

.content {
  display: grid;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  /* 直接通过列定义实现需求 */
  grid-template-columns: clamp(200px, 1fr, 400px) 5fr;
}

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