title: Flexbox child is growing outside its parent
body: <p>I use flexbox all of the time, but for some reason, this has had me scratching my head for a couple of days.</p>
  
  <p>What I'm looking for is the cyan-colored area to be XY-scrollable (.scrollable), with the magenta (.tab-content) padding around it.</p>
  
  <p>The lowest item that seems to have it together is the blue (.panels) div, which knows it should be window width and 200px high.  Then the flex child .body just grows off of the screen.</p>
  
  <p>It seems like the problem is that .body can't figure out how wide the parent .panels is.  I've never had an issue like this, and I'm pretty sure it revolves around not being able to wrap the text in the cyan table, but I have to have those as individual lines.</p>
  
  <p><strong>Chrome 48 (version mandated):</strong>
  <a href="https://i.stack.imgur.com/GKru3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GKru3.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  .detail {} .panels {
    background-color: blue;
    display: flex;
    max-height: 200px;
  }
  .header {
    background-color: red;
    margin-right: 1rem;
    flex-shrink: 0;
  }
  .body {
    background-color: green;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .tabs {
    flex-shrink: 0;
  }
  .tab-content {
    flex: 1;
    background-color: magenta;
    padding: 1rem;
  }
  .scrollable {
    overflow: auto;
    background-color: cyan;
  }
  .formatted-text {
    white-space: pre;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="detail"&gt;
    &lt;div class="panels"&gt;
      &lt;div class="header"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td&gt;Field&lt;/td&gt;
            &lt;td&gt;Value&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Field&lt;/td&gt;
            &lt;td&gt;Value&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Field&lt;/td&gt;
            &lt;td&gt;Value&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Field&lt;/td&gt;
            &lt;td&gt;Value&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="body"&gt;
        &lt;div class="tabs"&gt;Tabs&lt;/div&gt;
        &lt;div class="tab-content"&gt;
          &lt;div class="scrollable"&gt;
            &lt;table&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;01&lt;/td&gt;
                  &lt;td class="formatted-text"&gt;THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Codepen here:</strong>
  <a href="http://codepen.io/anon/pen/BjvWzR" rel="nofollow noreferrer">http://codepen.io/anon/pen/BjvWzR</a></p>