adding content to middle item of flex container making horizonal scrollbar

Issue

i want to make a webpage with 3 vertical side. witch 3 side cobined will take all viewport width. the mid one holding a content of posts with fixed height and full availavle width of the mid side contaienr. but when i add more content(posts) to the mid section and content exceed the height of virwport it make a horizonalbar(witch i interpret as extra width added). but why it behave like this?

react code

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;

css

.App {
  display: flex;
  /* width: 100vw; */
  max-width: 100vw;
  height: 100vh;
}

.first {
  background: #777972;
  height: 100%;
  width: 20%;
}
.mid {
  background: #88958d;
  height: 100%;
  flex-grow: 1;
}
.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;
}

why extra width get added in case mid side get longer than viewport height? any how to force other sides hieght to follow the mid side in case if new post added witch cuase height increases.

Solution

As much I understood your question-- If you want to add scroll bar in the middle section use overflow :auto it will provide you a scroll bar when the items will start overflowing out of the block.

Answered By - Muskan Agrawal