title: How to fix div width using scss (with react)
body: <p>I want to fix div width (image) and get scroll-bar. But the more add 'div', the smaller width of div in wrapper div area. It doesn't appear scroll-bar.</p>
  
  <p>This is image-wrapper below.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div className="image-list-wrapper"&gt;{imageList}&lt;/div&gt;
  </code></pre>
  
  <p>{imageList} are added by clicking button with 'div'</p>
  
  <pre class="lang-html prettyprint-override"><code>    let imageList;
      if(images){
        imageList = images
          .map((image, i) =&gt; {
            return(
            &lt;div key={i} className="image-list-item"&gt;
              &lt;img className="image-resize" src={`http://localhost:5000`+image}/&gt;
            &lt;/div&gt;
            )
        })
      }
  </code></pre>
  
  <p>and CSS (SCSS)</p>
  
  <pre class="lang-css prettyprint-override"><code>.image-list-wrapper {
    margin: auto;
    margin-top: 1.5rem;
    width: 95%;
    height: 12rem;
    border: 1px solid #bcbaba;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .image-list-item {
    float: left;
    width: 9rem;
    height: 9rem;
    margin: 0.5rem;
    margin-top: -0.5rem;
  }
  
  .image-resize {
    width: 100px;
    height: 160px;
  }
  </code></pre>
  
  <p>I got result below (screenshot)(please ignore other buttons.)</p>
  
  <p><a href="https://i.stack.imgur.com/C6V1O.png" rel="nofollow noreferrer">screen shot</a></p>
  
  <p><a href="https://i.stack.imgur.com/nloOj.png" rel="nofollow noreferrer">screen shot2</a></p>
  
  <p>The more images, the smaller images.</p>
  
  <p>I want scroll-bar and fixed width of div items in wrapper div.</p>