title: How can i make this flexbox container scroll instead of adapting the width?
body: <p>I want to make the flexbox container be 100%width and have a scrollbar to see the overflowing content. Now it seems to adapt the content to the width of the window and it always takes 100% of width with the content not overflowing at all.</p>
  
  <p><a href="https://codepen.io/UrsuGrizzly/pen/BmqPvm" rel="nofollow noreferrer">https://codepen.io/UrsuGrizzly/pen/BmqPvm</a>
  <a href="https://jsfiddle.net/duvq2e42/" rel="nofollow noreferrer">https://jsfiddle.net/duvq2e42/</a></p>
  
  <pre><code>&lt;div id="topimg"&gt;
   &lt;a href="#" id="st1"&gt;&lt;/a&gt;
   &lt;a href="#" id="second"&gt;&lt;/a&gt;
   &lt;a href="#" id="first"&gt;&lt;/a&gt;
   &lt;a href="#" id="third"&gt;&lt;/a&gt;
   &lt;a href="#" id="fourth"&gt;&lt;/a&gt;
   &lt;a href="#" id="fifth"&gt;&lt;/a&gt;
   &lt;a href="#" id="sixth"&gt;&lt;/a&gt;
   &lt;a href="#" id="nd2"&gt;&lt;/a&gt;
   &lt;a href="#" id="rd3"&gt;&lt;/a&gt;
   &lt;a href="#" id="th4"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  #topimg {
   display: flex;
   min-width:100%;
   overflow-x:scroll;
  }
  
  #topimg &gt; * {
   margin: 0 4px 0 0;
   box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  }
  
  #topimg #st1 {
   background-color: yellow;
   width: 125px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: center;
  }
  
  #topimg #nd2 {
   background-color: orange;
   width: 100px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: center;
  }
  
  #topimg #rd3 {
   background-color: cyan;
   width: 100px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: center;
  }
  
  #topimg #th4 {
   background-color:green;
   width: 100px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: center;
  }
  
  #topimg #first {
   background-color: purple;
   width: 100px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: center;
  }
  
  #topimg #second {
   background-color: red;
   width: 250px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: center;
  }
  
  #topimg #third {
   background-color: blue;
   width: 200px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: top;
  }
  
  #topimg #fourth {
   background-color: fuchsia;
   width: 250px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: center;
  }
  
  #topimg #fifth {
   background-color: brown;
   width: 100px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: center;
  }
  
  #topimg #sixth {
   background-color: coral;
   width: 100px;
   height: 144px;
   display: block;
   background-size: cover;
   background-position: center;
  }
  </code></pre>