防止div与动态内容重叠其他div

Question

请参阅此Fiddle

这是div结构

<div class="wrapper">
    <div class="mainG mainGT">
        <div class="rawV">
            <div class="svs"></div>
            <div class="drgM"></div>
        </div>
    </div>
</div>
<div class="botttom">
    <button type="button">Click Me!</button>
</div>

.wrapper的高度是动态的（我在小提琴中使用.wrapper{height: 30px;}作为例子）。如您所见，.wrapper重叠.botttom。如何在任何时候阻止.wrapper重叠.botttom and have。botttom below。wrapper`？

|------------|
|  .wrapper  |
|------------|

|------------|
|  .bottom   |
|------------|

Answer 1

使用min-height代替height这将解决您的问题。

.wrapper
{
min-height: 100px;
overflow: hidden;
}