<div class="overlapWrap">
  <div>
    <div style="background: green;"></div>
  </div>
  <div>
    <div style="background: pink;"></div>
  </div>
  <div>
    <div style="background: orange;"></div>
  </div>
  <div>
    <div style="background: blue;">This one has some content. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Some more content to stretch this box.
    </div>
  </div>
</div>
* {
  box-sizing: border-box;  
}

body {
  background: lightblue;
  font-family: sans-serif;
  font-size: 20px;
}

.overlapWrap {
  display: flex;
  
  > div {
    max-width: 50px;
    
    > div {
      min-width: 300px;
      height: 100%;
      padding: 20px;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.