How to have a div ignoring it's parent's display: flex

Viewed 8227

I have a parent div with display: flex. I would like for one of the child div to ignore that.

For example I want something like this:

Child div1

Child div2, Child div3, Child div4

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.

/* 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;
}
5 Answers
Related