title: CSS flex positioning of DIV containers
body: <p>Can I archive the desired positioning (see comments in code and try different the different width values) with this approach or would I have to work with breakpoints? <a href="https://jsfiddle.net/ekca7pjr/" rel="nofollow noreferrer">https://jsfiddle.net/ekca7pjr/</a> If the screen is small (&lt;=632 px) everything is as it should be. Between 633 and 671 the div container with class='three' breaks to the right of 'two'. However, I have set flex-grow=1 for class 'two', hoping it would eat up the remaining main axis space like it does in case width >= 672. But in the latter case I would like to have THREE centered below ONE, to the left of TWO (in case TWO is higher than ONE. After hours of fiddling I am lost.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer {
    /* width: 632px; all correct if TWO breaks*/
    /* width: 633px; THREE should not be to the left of TWO, but stay below centered, like width &lt;= 632 */
    /* width: 672px; ONE should not grow in height and THREE should be centered below ONE, left of TWO */
    width: 632px;
    border: 1px solid black;
    margin: 1px 1px 1px 1px;
    padding: 1px 1px 1px 1px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .one {
    border: 1px solid black;
    margin: 1px 1px 1px 1px;
  }
  
  .two {
    border: 1px solid green;
    margin: 1px 1px 1px 1px;
    flex-grow: 1;
    /* try to take all the space such that there is no more space for THREE */
  }
  
  .three {
    border: 1px solid black;
    margin: 1px 1px 1px 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='outer'&gt;
    &lt;div class='one'&gt;
      ONE&lt;br&gt; Small&amp;nbsp;image
      &lt;br&gt; here
    &lt;/div&gt;
    &lt;div class='two'&gt;
      TWO, text, as wide as it gets, to break the whole div block below ONE&lt;br&gt; Probably higher than ONE&lt;br&gt; Really!
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;Table&lt;/th&gt;
          &lt;th&gt;to&lt;/th&gt;
          &lt;th&gt;stay&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;with&lt;/td&gt;
          &lt;td&gt;div&lt;/td&gt;
          &lt;td&gt;TWO&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      Some more text
    &lt;/div&gt;
    &lt;div class='three'&gt;
      THREE
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>