title: can someone explain to me this flexbox css problem?
body: <p>demo: <a href="https://codesandbox.io/s/confident-bash-55v3z" rel="nofollow noreferrer">https://codesandbox.io/s/confident-bash-55v3z</a></p>
  
  <p>I was following along some tutorial and I encountered this problem. the code is simple</p>
  
  <p>I have flex container called <code>images</code></p>
  
  <pre><code>&lt;div class='images'&gt;
    &lt;img src='imgs/787.jpg' class="main" /&gt;
    &lt;img src='imgs/sub1.jpg' class="sub1" /&gt;
    &lt;img src='imgs/sub2.jpg' class="sub2" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and for the stylesheet I have</p>
  
  <pre><code>.images {
    width: 234px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    border: 1px solid red;
  }
  
  .images &gt; * {
    padding: 1px;
    height: 111px;  &lt;--- this seems like a magic number to me 
  }
  
  img.main {
    flex-basis: 99%;
  }
  
  img.sub1,
  img.sub2 {
    flex-basis: 49%;
  }
  </code></pre>
  
  <p>the intended look is like this</p>
  
  <p><a href="https://i.stack.imgur.com/vpRUd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vpRUd.png" alt="enter image description here"></a></p>
  
  <p>However when I commented out the <code>height: 111px;</code>line, the layout is off
  <a href="https://i.stack.imgur.com/BSdbm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BSdbm.png" alt="enter image description here"></a></p>
  
  <p>I am new to flexbox and css in general and I know that <code>flex-basis</code> is soft of like <code>min-width</code>. Without the height being <code>111px</code>, the image will grow to occupy more space than its <code>min-width</code>(or <code>flex-basis</code>).</p>
  
  <p>So my question is, to achieve the correct layout we want, how did the original author of the style sheet know that the height needs to be <code>111px</code>? Can we achieve this layout using 'max-width' or other techniques which would make more sense to me?</p>