Flex Example

HTML

<div class="container">

    <div>Div 1</div><!-- flex item #1 -->
    
    <div>           <!-- flex item #2 and nested flex container -->
    
        <div><!-- flex item and nested flex container -->
        
            <div>Div 2.1.1</div><!-- flex item -->
            
            <div>Div 2.1.2</div><!-- flex item -->

        </div><!-- end flex item / container 2.1 -->
        
        <div>Div 2.2</div><!-- flex item -->
        
    </div>          <!-- end flex item / container #2 -->
    
  <div>Div 3</div>
  
</div>

CSS

html,
body,
.container {
    height: 100%;
    background-color: white;
}

.container {
    display: flex;
    flex-direction: column;          /* switch container to vertical stacking */
    /* flex-wrap: wrap; */
}

.container div {                   
    margin: 10px;
    flex: 1;
    background-color: orange;
}

.container > div:first-child {

}

.container > div:nth-child(2) {
    display: flex;
    background-color: white;
}

.container > div:nth-child(2) > div:first-child {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-right: 20px;
}

.container > div:nth-child(2) div {
    flex: 1;
    margin: 0;
}

.container > div:nth-child(2) > div:first-child > div:first-child {
    margin-bottom: 20px;
}

.container > div:nth-of-type(4) {
  
}