title: Flexbox inside fixed width parent not working
body: <p>I reproduced the problem here <a href="http://jsfiddle.net/dmo266uy/1/" rel="nofollow noreferrer">http://jsfiddle.net/dmo266uy/1/</a></p>
  
  <p>Sadly I can't touch that parent class but if i remove the width on it the flex works. resizing the window moves the cards inside the card-list.</p>
  
  <p>How to get this card-list to work within this constraint? 
  (more details more details more details more details more details .....)
  CSS:</p>
  
  <pre><code>    .container_9 {
        margin: 0 auto;
        width: 980px;
      }
      .clearfix {
          display: block;
          border: none;
      }
      .card-list {
        width: auto !important;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-direction: row;
          flex-wrap: wrap;
          align-content: stretch;
      }
      .card {
          width: 270px;
          min-width: 150px;
          margin: 0 20px 30px 0;
          text-align: center;
          background-color: #fff;
          border: 1px solid #eee;
          border-radius: 3px;
          cursor: pointer;
          position: relative;
          align-self: stretch;
          display: flex;
          flex-direction: column;
          position: relative;
          transition: all .2s ease-in-out;
      }
  
      .card:hover {
          border-color: #DDD;
          box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
          transform: translateY(-6px);
      }
  
      .card * {
          box-sizing: border-box;
      }
  
      .type {
          background-color: #0099CC;
          width: 100%;
          flex: 0 1 45px;
          line-height: 25px;
          padding: 10px;
          font-size: 18px;
          font-weight: bold;
          color: #fff;
          border-radius: 3px 3px 0 0;
      }
  
      .content {
          flex: auto;
      }
  
      .content .title {
          font-size: 24px;
          color: #0099CC;
          font-weight: normal;
          margin: 10px 0;
      }
  
      .content .title i {
          font-size: 18px;
      }
  
      .content p {
          font-size: 14px;
          color: #777;
          padding: 5px;
      }
      .content img {
        margin: 3px;
      }
      &lt;div id="page" class="container_9 clearfix"&gt;
      &lt;ul class="card-list"&gt;
          &lt;li class="card"&gt;
              &lt;div class="type"&gt;
                  Title&lt;/div&gt;
              &lt;div class="content"&gt;
                   &lt;h3 class="title"&gt;&lt;img src="http://placehold.it/100x100" style="float: left;"&gt;My repo name &lt;/h3&gt;
      &lt;p&gt;
      We would add a rule to our stylesheet that would float that image and also add a little padding next to it so that the text that will ultimately wrap around the image does not butt up against it too closely. Here is the CSS you may write: .left { float: left; padding: 0 20px 20px 0; }. This style floats that image to the&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/li&gt;
              &lt;li class="card"&gt;
              &lt;div class="type"&gt;
  
                  Title&lt;/div&gt;
              &lt;div class="content"&gt;
                   &lt;h3 class="title"&gt;&lt;img src="http://placehold.it/100x100" style="float: left;"&gt;My repo name &lt;/h3&gt;
      &lt;p&gt;
      We would add a rule to our stylesheet that would float that image and also add a little padding next to it so that the text that will ultimately wrap around the image does not butt up against it too closely. Here is the CSS you may write: .left { float: left; padding: 0 20px 20px 0; }. This style floats that image to the&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/li&gt;
              &lt;li class="card"&gt;
              &lt;div class="type"&gt;
  
                  Title&lt;/div&gt;
              &lt;div class="content"&gt;
                   &lt;h3 class="title"&gt;&lt;img src="http://placehold.it/100x100" style="float: left;"&gt;My repo name &lt;/h3&gt;
      &lt;p&gt;
      We would add a rule to our stylesheet that would float that image and also add a little padding next to it so that the text that will ultimately wrap around the image does not butt up against it too closely. Here is the CSS you may write: .left { float: left; padding: 0 20px 20px 0; }. This style floats that image to the&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/li&gt;
     &lt;/ul&gt;   
      &lt;/div&gt;
  </code></pre>