title: Horizontal scroll bar not working even when I am setting a fixed width to my div parent?
body: <p>as the question mention, my horizontal scrollbar is not working, I am working on a react app, I am trying to build a small TableData component, here is my rendered jsx code : </p>
  
  <pre><code>&lt;table&gt;
          &lt;div className="co-table"&gt;
                  &lt;div className="co-table__long"&gt;
                      &lt;div className="co-table__header"&gt;
                          &lt;div className="co-table__header--col"&gt;
                              {" "}
                              &lt;span&gt;Date d'operation&lt;/span&gt;{" "}
                          &lt;/div&gt;
                          &lt;div className="co-table__header--col"&gt;
                              {" "}
                              &lt;span&gt;Type de Mouvement&lt;/span&gt;{" "}
                          &lt;/div&gt;
                          &lt;div className="co-table__header--col"&gt;
                              {" "}
                              &lt;span&gt;Montant ($$) &lt;/span&gt;{" "}
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="co-table__corps"&gt;
                          &lt;div className="co-table__corps--head"&gt;head&lt;/div&gt;
                          &lt;div className="co-table__corps--row"&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="co-table__corps--row"&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="co-table__corps"&gt;
                          &lt;div className="co-table__corps--head"&gt;head&lt;/div&gt;
                          &lt;div className="co-table__corps--row"&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="co-table__corps--row"&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="co-table__corps"&gt;
                          &lt;div className="co-table__corps--head"&gt;head&lt;/div&gt;
                          &lt;div className="co-table__corps--row"&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="co-table__corps--row"&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                              &lt;div className="co-table__corps--column"&gt;ff&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I know it is so much code but it is repeated code, I will explain in details what I want to achieve, here is my SASS file : </p>
  
  <pre><code>.co-table {
  width:300px;
  height: 150px;
  
  
  &amp;__long {
      width: 300px;
      height: 150px;
      overflow-x: scroll;
      &amp;:after {
          content: "";
          clear: both;
      }
  }
  
  &amp;__header {
      display:inline-block;
      width:100px;
      height: 150px;
      float: left;
  
      &amp;--col {
          width:100px;
          height: 50px;
          background: #333;
          color:white;
          span {
              font-size:13px;
              padding:10px 0;
          }
      }
  }
  
  
  &amp;__corps {
      display:inline-block;
      float: left;
      height: 150px;
      &amp;--head {
          width:60px;
          height: 150px;
          background:lightgray;
          float: left;
  
      }
      &amp;--row {
          float: left;
          width:100px;
          height: 150px;
      }
      &amp;--column {
          width:100px;
          height: 50px;
          border:1px solid lightblue;
      }
  }
  
  &amp;:after {
      content: "";
      clear:both;
  }
  
  
  }
  </code></pre>
  
  <p>As you can see in my SASS file I am trying to add the horizontal scrollbar to the div with **** co-table__long **** class but it is not working, that div had its children and their total width is more than 700px, and I fixed my parent width to 300 px so I can see the horizontal scrollbar .. instead I see the vertical one, I see also the horizontal one but not working .. </p>
  
  <p>Here is what I am looking for : <a href="https://i.stack.imgur.com/BH85b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BH85b.png" alt="enter image description here"></a></p>
  
  <p>Here is a link to my work, I hope it will work : </p>
  
  <p><a href="https://codesandbox.io/s/y03696lrl9" rel="nofollow noreferrer">https://codesandbox.io/s/y03696lrl9</a></p>
  
  <p>Any help would be much appreciated.</p>