title: How to have a div ignoring it's parent's display: flex
body: <p>I have a parent <code>div</code> with <code>display: flex</code>. I would like for one of the child <code>div</code> to ignore that. </p>
  
  <p>For example I want something like this:</p>
  
  <p>Child div1</p>
  
  <p>Child div2, Child div3, Child div4</p>
  
  <p>I want the first Child div1 to be on top without having any other elements in it's line. I know I can make this happen if I just take the child div1 outside of it's parent, but it would be nice to know another way.</p>
  
  <pre><code>/* Parent div */
  .boxContainer {
      display: flex;
      height: 500px;
      width: 100%;
  }
  
  /* Child div1 */
  .headerBox {
      height: 100px;
  }
   /* more child div */
  .imgBox {
      margin-top: 100px;
      height: 375px;
      width: 375px;
  }
  </code></pre>