Flex容器中间栏内容溢出出现水平滚动条及侧边高度适配问题

问题说明 #

需要实现三栏占满视口宽度的网页，中间栏承载固定高度的帖子内容。当前存在两个问题：

• 添加更多帖子导致中间栏内容超出视口高度时，出现不必要的水平滚动条
• 两侧侧边栏高度固定为视口高度，无法跟随中间栏内容高度变化

修复思路 #

1. 让布局高度自适应内容：移除容器的固定视口高度限制，让三栏的高度由中间栏的内容决定，两侧边栏自动继承容器高度。
2. 控制中间栏内部滚动：给中间栏添加垂直滚动属性，内容超出时仅在中间栏内部滚动，避免页面整体溢出。
3. 防止内容横向溢出：确保帖子内的长文本自动换行，同时用盒模型属性避免padding增加元素宽度。

修改后的代码 #

CSS 代码 #

.App {
  display: flex;
  width: 100%; /* 占满父容器宽度，避免滚动条宽度影响 */
}

.first {
  background: #777972;
  height: 100%; /* 自动跟随容器高度变化 */
  width: 20%;
}
.mid {
  background: #88958d;
  flex-grow: 1;
  overflow-y: auto; /* 内容超出时内部垂直滚动 */
  padding: 0 10px; /* 可选：避免帖子贴紧栏边 */
}
.last {
  background: #8e8587;
  height: 100%; /* 自动跟随容器高度变化 */
  width: 20%;
}

.post {
  width: 100%;
  min-height: 200px;
  margin-block: 10px;
  background: #d2bf55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box; /* 确保padding不额外增加宽度 */
}

.post p {
  word-break: break-word; /* 长文本自动换行，避免横向溢出 */
  max-width: 90%; /* 可选：限制文本宽度，提升美观 */
}

React 代码（核心逻辑无需修改） #

const Post = ({content , user , date})=>{
  
  return(
    <div className="post">
      <h1>{user}</h1>
      <p>{content}</p>
      <h5>{JSON.stringify(date)}</h5>
    </div>
  )
}

const Side1 = () =>{
  return (
    <section className="first">

    </section> 
  )
}
const SideMid = ({PostArr}) =>{

  const rendredPosts = PostArr.map(post => <Post {...post} />)

  return (
    <section className="mid">
      {rendredPosts}
    </section> 
  )
}

const Side2 = () =>{
  return (
    <section className="last">
    </section> 
  )
}

function App() {
  const [curPosts , setCurPosts] = useState(posts);
  const [val, setval] = useState("");
  const [val2, setval2] = useState("");

  return (
    <div className="App">
      
      <Side1 />
      <SideMid PostArr={curPosts} />
      <Side2 />

    </div>
  )
}

export default App;

关键修改点 #

• 移除.App的height:100vh，让容器高度由内容动态决定，两侧边栏的height:100%会自动跟随中间栏高度变化。
• 给.mid添加overflow-y: auto，当中间内容过多时，仅在中间栏内部生成垂直滚动条，避免页面整体出现水平滚动。
• 添加box-sizing: border-box和word-break属性，彻底解决内容横向溢出导致的水平滚动问题。

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