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
  }