如果最后一个子元素＆＃39; margin-top＆＃39;如何扩展父亲的身高？小于其自身的负高度和父元素

Question

以下是最后一个子元素margin-top的示例，它小于其自身的负高度。 （身高：50px; margin-top：-100px）

如果我没有将[id=m2]添加为最后一个子元素，则父级的高度不会“缩小”。

现在，我不希望父母的身高“缩小”，并希望它总能扩展到最低点。

有什么想法吗？

＆＃13;

＆＃13;

#wrap {
    background: black;
    overflow: visible;
}

.m {
    width: 100px;
}

#m1 {
    margin-top: 10px;
    margin-left: 10px;
    height: 100px;
    background: #F0F;
}

#m2 {
    margin-top: -100px;
    margin-left: 120px;
    height: 50px;
    background: #0FF;
}

＆＃13;

<div id="wrap">
    <div class="m" id="m1"></div>
    <div class="m" id="m2"></div>
 </div>

＆＃13;

＆＃13;

＆＃13;

修改

我想用背景颜色实现基本的砖石效果，如下所示：

＆＃13;

＆＃13;

#wrap {
    background: black;
    overflow: visible;
}

.m {
    width: 100px;
}

#m1 {
    margin-top: 10px;
    margin-left: 10px;
    height: 100px;
    background: #F0F;
}

#m2 {
    margin-top: -100px;
    margin-left: 120px;
    height: 50px;
    background: #0FF;
}

#m3 {
    margin-top: -50px;
    margin-left: 230px;
    height: 100px;
    background: #F0F;
}

#m4 {
    margin-top: -100px;
    margin-left: 340px;
    height: 30px;
    background: #0FF;
}

#m5 {
    margin-top: 80px;
    margin-left: 10px;
    height: 100px;
    background: #FF0;
}

#m6 {
    margin-top: -150px;
    margin-left: 120px;
    height: 100px;
    background: #F00;
}

#m7 {
    margin-top: -50px;
    margin-left: 230px;
    height: 30px;
    background: #0F0;
}

#m8 {
    margin-top: -100px;
    margin-left: 340px;
    height: 20px;
    background: #00F;
}

＆＃13;

<div id="wrap">
    <div class="m" id="m1"></div>
    <div class="m" id="m2"></div>
    <div class="m" id="m3"></div>
    <div class="m" id="m4"></div>
    <div class="m" id="m5"></div>
    <div class="m" id="m6"></div>
    <div class="m" id="m7"></div>
    <div class="m" id="m8"></div>
 </div>

＆＃13;

＆＃13;

＆＃13;

但是父母的身高总是在缩小，而最后一个元素margin-top小于自身的负高度。我知道让父母overflow auto可以解决这个问题，但我不想看滚动条。我只希望父母的身高可以自动扩展到底部。任何人都可以解决这个问题吗？