SOURCE

<div class="wrap">
    <div class="box1">你是难道你难道你</div>
    <div class="box2">你奶奶吹牛dhhdhdh和多好多好多好吹牛吹牛吹牛吹牛吹牛你奶奶吹牛吹牛吹牛吹牛吹牛吹牛你奶奶吹牛吹牛吹牛吹牛吹牛吹牛你奶奶吹牛吹牛吹牛吹牛吹牛吹牛你奶奶吹牛吹牛吹牛吹牛吹牛吹牛</div>
    <div class="box3">大家打架就打架大家</div>
</div>

.wrap{
    overflow: hidden
}
.wrap>div{
    float: left;
     width: 30%;
     padding-bottom: 1000px;
     margin-bottom: -1000px;
}
.box1{
    background-color: orange
}
.box2{
    background-color: blue
}
.box3{
    background-color: pink
}
/* 元素设置的padding-bottom尽可能大一些，并且需要设置一样大小的margin-bottom负值
去抵消padding-bottom撑大的区域，正负一抵消，对于页面布局不会有影响。
另外的话还需要设置父元素overflow：hidden把子元素多出来的色块背景隐藏掉，
上述CSS解决方法没有任何兼容性问题， */

/* flex */
/* .wrap{
    display: flex;
}
.wrap>div{
    width: 30%;
}
.box1{
    background-color: orange
}
.box2{
    background-color: blue
}
.box3{
    background-color: pink
} */