html - div 大小自动调整到内容

Question

我正在尝试仅使用 HTML5/CSS3 创建一个容器 div 元素，它根据以下规则调整其内容的大小:

1. 如果内容的宽度 > 最大宽度，将显示水平滚动条
2. 如果内容的高度 > 容器的最大高度，将显示垂直滚动条
3. 如果内容适合水平或垂直，则不会显示滚动条

到目前为止我有这个http://jsfiddle.net/Bikram/73e7atqm/但无法摆脱 chrome 中的水平滚动条(如预期的那样，在 IE 中水平滚动条未显示)。

HTML:

<div class="container">
<div class="content" />
</div>

CSS:

.container {
    display: inline-block;
    position: absolute;
    background-color: black;
    padding: 5px;

    max-width: 200px;
    max-height: 200px;
    overflow-y: auto;

    top: 20px;
    left: 20px;
}

.content {
    display: block;
    background-color: lightgrey;
    width : 200px;
    height: 200px;
}

我知道我可以使用 JS/JQ 轻松地做到这一点。我的问题是没有它们能否实现？

Answer 1

参见 JSFiddle:

http://jsfiddle.net/73e7atqm/4/

当您使用 max-height 或 max-width 时，div 不会超出指定的尺寸。

因此，您需要使用标准的宽度或高度。

此外，overflow-y 仅用于 height 溢出。对 height 和 width 溢出使用 overflow。