内联块的最小高度不起作用

Question

为什么这个div元素会剪切内容？它应符合内容

http://jsfiddle.net/ojfxtwdv/

<div>
    text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
    text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>

div {
    display: inline-block;
    height: 200px;
    min-height: 200px;
    padding: 20px;
    width: 100%;
    border:1px solid black;
}

Answer 1

您已设置min-height 200px，但也设置了height 200px哪种呈现min-height毫无意义。如果您删除了height内容适合的内容。

div {
    display: inline-block;
    /* height: 200px; Remove this */
    min-height: 200px;
    padding: 0;
    width: 100%;
    border: 1px solid black;
}