我如何阻止 Parent Div 因为它的孩子而扩大？

Question

So child div is has a list of items next to each other, each with a fix width.

In this image child div extends past MainContent but in the actual app, MainContent extends to fit the width of child div.

I would like to make it so that when child overflows, it just has a scroll wheel instead of becoming so large.

I have tried setting Child Div to 'overflow-x : auto'

Child div width is at 100%, as is MainContent.

JSX/HTML

<div className = 'app'>
  <div className = 'navbar'></div>
    <div className = 'maincontent'>
      <div className = 'child'>
        <div className = 'childlist'>
          <button className = 'btn'></button>
          <button className = 'btn'></button>
          <button className = 'btn'></button>
        </div>
      </div>
    </div>
  </div>

CSS

.app : {
    display : flex,
    width: 100vw,
    height :100vh
  }
  .navbar : {
    display : flex,
    flex-direction :column,
    width : 112
  }
  .maincontent:{
    display : flex,
    width : 100%
  }
  .child: {
    width :100%
  }
  .childlist:{
    display : flex,
    width :90%
  }
  .btn:{
    width : 200,
    height :200
  }

Answer 1

All your containers widths are relative, so it will adjust, not overflow. If your child's width is % of the parent's, then it'll never overflow.

You need to have fixed width to make it overflow.

Plus your code looks really messy, you may want to try Prettier