title: CSS flex layout - Cropped text & Missing right margin
body: <p>I'm trying to use flex layout in simple image gallery (wip) <a href="http://codepen.io/anon/pen/vmhLe" rel="nofollow noreferrer">http://codepen.io/anon/pen/vmhLe</a>.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
  .thumbPanel {
      display: flex;
      align-items: center;
  
      border: 2px solid MidnightBlue;
      background-color: Gray;
  }
  
  .thumbAdminMenu {
      display: flex;
      flex-direction: column;
      align-items: stretch;
  }
  
  .thumbAdminButton {
      display: inline-block;
      margin: 0px;
      margin-left: 5px;
      flex-shrink: 0;
      flex-grow: 0;
  
      border: 2px solid MidnightBlue;
      font-size: 20pt;
  }
  
  .thumbList {
      display: flex;
      align-items: center;
      margin: 5px;
      overflow: auto;
      width: 100%;
  
      border: 2px solid MidnightBlue;
      background-color: Gainsboro;
  }
  
  .thumbArea {
      min-width: 200px;
      min-height: 200px;
      margin: 5px 0px 5px 5px;
  
      background-color: LightGoldenRodYellow;
      border: 1px solid MidnightBlue;
  }
  .thumbArea:first-child,  {
      margin-left: 0px;
  }
  .thumbArea:last-child {
      margin-right: 5px;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="thumbPanel"&gt;
      &lt;div class="thumbAdminMenu"&gt;
          &lt;button class="thumbAdminButton"&gt;AddXXX&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="thumbList"&gt;
          &lt;div class="thumbArea"&gt;&lt;/div&gt;
          &lt;div class="thumbArea"&gt;&lt;/div&gt;
          &lt;div class="thumbArea"&gt;&lt;/div&gt;
          &lt;div class="thumbArea"&gt;&lt;/div&gt;
          &lt;div class="thumbArea"&gt;&lt;/div&gt;
          &lt;div class="thumbArea"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The result (browser window shrinked):</p>
  
  <p><img src="https://i.imgur.com/znMcrS2.png"><a href="https://i.imgur.com/znMcrS2.png" rel="nofollow noreferrer">http://i.imgur.com/znMcrS2.png</a></p>
  
  <p>Why is the text AddXXX cropped?</p>
  
  <p>Why is the right margin of right most yellow div missing? I'm setting it with <code>.thumbArea:last-child</code> rule.</p>
  
  <p>Here's the playground: <a href="http://codepen.io/anon/pen/vmhLe" rel="nofollow noreferrer">http://codepen.io/anon/pen/vmhLe</a>. There's an issue on codepen and jsfiddle with bottom horizontal scrollbar overflowing (at least for me in Chrome). But when viewing HTML file it displays fine. Also if you open developer console in Chrome it will display fine too.</p>
  
  <p>Thank you.</p>