Flexbox margin and offseting issue with stair effect - css

Question

I have a problem with a layout I'm trying to achieve with flexbox. I'd like to offset my columns a little more than the previous one to have a diagonal/stairs effect, but I'd also like them to keep the same height grown to the tallest one as flexbox automagically provides.
At first, I thought to myself: I just need to make them the same height with flexbox and then offset them with margins, but it seems that vertical margins are handled quite differently with flexbox as they push the upper side of the box, but not the whole box... this results in all my columns having their bottoms aligned, but that's not what I'd like to achieve.
Note : I know this can be achieved many other ways like relative positioning, adding padding on the parent, setting a min-height, with JavaScript and others, but I'd like to keep the document flow intact, keep ignoring the object's sizes and avoid using JS. I've also read that an upcoming flex-gap or item-gap would probably solve such issues in the future, but it's still an open issue / idea in the CSS Working Group draft.
Here's a text doodle for documentation's perennity.
Flex Expected
- -
| - | -
| | - | | -
| | | | | |
- - - - | |
- |
-
Here's a live demo of what I want to achieve and the current result with flexbox spec :
*{
box-sizing:border-box;
}
.wrap{
display:flex;
flex-direction: row;
width: 100%;
}
.box{
flex:0 0 33%;
padding:0 10px;
}
.box:nth-child(2){
margin-top: 60px;
}
.box:nth-child(3){
margin-top: 120px;
}
.box-inner{
height: 100%;
text-align:center;
background:#ccc;
border-radius:10px;
padding: 20px;
box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}
.wrap2{
overflow:hidden;
}
.box2{
float:left;
width:33%;
padding: 0 10px;
}
.box2:nth-child(2){
margin-top: 60px;
}
.box2:nth-child(3){
margin-top: 120px;
}
.box-inner2{
min-height:300px;
text-align:center;
background:#ccc;
border-radius:10px;
padding: 20px;
box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}
<h2>Flexbox</h2>
<div class="wrap">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
<h2>Expected</h2>
<div class="wrap2">
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
Thanks!

Answer 1

Play with bottom margin. See below.
* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-direction: row;
width: 100%;
}
.box {
flex: 0 0 33%;
padding: 0 10px;
}
.box:nth-child(2) {
margin-top: 60px;
margin-bottom: -60px;
}
.box:nth-child(3) {
margin-top: 120px;
margin-bottom: -120px;
}
.box-inner {
height: 100%;
text-align: center;
background: #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
.wrap2 {
overflow: hidden;
}
.box2 {
float: left;
width: 33%;
padding: 0 10px;
}
.box2:nth-child(2) {
margin-top: 60px;
}
.box2:nth-child(3) {
margin-top: 120px;
}
.box-inner2 {
min-height: 300px;
text-align: center;
background: #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
<h2>Flexbox</h2>
<div class="wrap">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
<h2>Expected</h2>
<div class="wrap2">
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>