Почему мой overflowX не работает с шириной 100%, но когда я установил его на фиксированную ширину, такую ​​как width = 50px, он работает в React

Question

Ширина innerCodeBox составляет 100%. И это работает, как и должно, когда вы уменьшаете экран, но когда ширина поля достигает ширины текста, экран перестает уменьшаться и добавляет горизонтальную полосу прокрутки на всю страницу вместо поля div.

Я также не хочу, чтобы текст был перенесен, отсюда и горизонтальная полоса прокрутки.

import React, { Component } from "react";
import { Carousel } from 'react-responsive-carousel';
import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';

//Pages
import '../App.css';


//Components
import ScrollCodeExample from '../Components/ScrollCodeExample'

//Material UI
import { withStyles } from "@material-ui/core/styles";



//Images Autocad & Inventor
import resumepic from '../Images/resumepic.png'
import DogBearGames from '../Images/DogBearGames.png'
import Auto1 from '../Images/Auto1.png'
import Auto2 from '../Images/Auto2.png'
import Auto3 from '../Images/Auto3.png'
import Auto4 from '../Images/Auto4.png'
import Auto5 from '../Images/Auto5.png'
import Auto6 from '../Images/Auto6.png'
import Auto7 from '../Images/Auto7.png'

//Images Code
import App from '../Images/App.png'
import Main from '../Images/Main.png'






const useStyles = theme => ({
  root: {
    overFlowY: "scroll",
    marginTop: "8%",
    marginRight: "20px"
  },
  title: {
    fontSize: "20px",
    position: "absolute",
    left: "50px",
    marginRight: "50px"
  },
  columnPhone: {
    marginBottom: "80px",
  },
  carousel: {
    width: "50%",
    height: "50%"
  },
  innerCodeBox: {
    overflowX: "scroll",
    overflowY: "scroll",
    borderStyle: "solid",
    width: "100%",
    height: "200px",
    marginBottom: "80px",
    whiteSpace: "noWrap",
    resize: "none",
    rows: 5,
    backgroundColor: "#afb3fa",
    display: "inline-block"

  }
});

export class Examples extends Component {

  render() {

    const { classes } = this.props;
    return (
      <div className={classes.root}>
      <div className={classes.title}>
        <h1>Past projects of mine</h1>
        <p style={{maxWidth: "500px"}}>Take a look at some of my past projects. I enjoy learning 
          new things and these are just some of the things I have created. 
        </p>
        <br></br>
        <br></br>
        <br></br>

        <h1>AutoCAD & Inventor Snippets</h1>

        <br></br>

        <Carousel showThumbs={false} interval={2500} autoPlay={true} showArrows={true} showStatus={false} infiniteLoop={true} style={{marginBottom: "20px"}}>
                <div>
                    <img src={Auto1} />
                </div>
                <div>
                    <img src={Auto2} />
                </div>
                <div>
                    <img src={Auto3} />
                </div>
                <div>
                    <img src={Auto4} />
                </div>
                <div>
                    <img src={Auto5} />
                </div>
                <div>
                    <img src={Auto6} />
                </div>
                <div>
                    <img src={Auto7} />
                </div>

            </Carousel>

            <br></br>

        <h1>Code Snippets (React.js)</h1>

       <div className={classes.innerCodeBox}>
         <code style={{fontSize: 14, zIndex: -1}}>

           <span>handleSumbit = (event) => &#123;</span> <br/>
           <span>event.preventDefault();</span> <br/> <br/>
           <span>const formData = &#123;</span> <br/>
           <span>name: this.state.name,</span> <br/>
           <span>email: this.state.email,</span> <br/>
           <span>email: this.state.message,</span> <br/> 
           <span>&#125;,</span> <br/> <br/>
           <span>this.setState(&#123; showAlert: true &#125;);</span> <br/>
           <span>this.setState(&#123; name: "", email: "", message: "" &#125;);</span> <br/> <br/>

           <span>this.props.sendMessage(formData);</span> <br/> <br/>
           <span>setTimeout(function()&#123; this.setState(&#123; showAlert: false &#125;) &#125;.bind(this), 5000);</span> <br/>
           <span>&#125;,</span> <br/> <br/>

         </code>
       </div>
      </div>
      </div>
    );
  }
}

export default withStyles(useStyles)(Examples);