title: css flex-item default height issue
body: <p>i am learning CSS flex-box stuff and when i play around with it i have found a wired thing:</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>.container {
    width: 100%;
    display: flex;
    border: 5px solid grey;
  }
  
  .box1 {
    border: 2px solid red;
    width: 30%;
    height: 500px;
  }
  
  .box2 {
    border: 2px solid blue;
    width: 40%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="box box1"&gt;
        &lt;p class="text"&gt;I do not remember how and when I discovered her music, but when I heard her, I was moved by…&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="box box2"&gt;
        &lt;p class="text"&gt;I do not remember how and when I discovered her music, but when I heard her, I was moved by…&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="box box3"&gt;
        &lt;p class="text"&gt;I do not remember how and when I discovered her music, but when I heard her, I was moved by…&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the wired thing is: i have set the height of box1 element to 500px only, but from the result, i saw the box2 got the same height as 500px default even i didn't set any height value on it. And then i changed the box2 height value as 300px and didn't give a fix height on box3:</p>
  
  <pre><code>    .box1{
          border: 2px solid red;
          width: 30%;
          height: 500px;
      }
  
      .box2{
          border: 2px solid blue;
          width: 40%;
          height:300px;
      }
  
  
      .box3{
       border: 2px solid blue;
       width:30%;
      }
  </code></pre>
  
  <p>this time from the result i found the height of box3 was 500px so my questions are:</p>
  
  <ol>
  <li><p>after calling container as <code>display:flex</code>, is that the flex items with no pre-height set will inherit the other flex item with biggest hight value?</p></li>
  <li><p>after calling container as <code>display:flex</code>, may i consider all its contained items will behave like <code>inline-block</code>elements? </p></li>
  </ol>