html - 如何制作溢出 :auto expand to the height of its contents up to a point? 的外部 div

Question

我有一个 div (frame_outer)，其中包含另一个 div (frame_inner)，其中包含动态内容。我想要的是 frame_outer 自动扩展它的高度，直到它达到 frame_inner 的高度或它自己的最大高度。

可能值得一提的是，我首先使用 frame_outer 的原因是因为有时我希望 frame_inner 的内容水平扩展而不溢出页面的一侧(因此 overflow:auto on frame_outer ).

JSFiddle is here.

我试过以各种方式使用 clear:both、height:auto、display:block，但似乎没有任何效果。

Fiddle 的代码:

HTML:

<div class="frame_outer">
    <div class="frame_inner">
        <ul class="my-col">Important stuff</ul>
        <ul class="my-col">Important stuff
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff yay yay cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
        </ul>
        <ul class="my-col">Important stuff</ul>
    </div>
</div>

CSS:

.frame_outer {
    overflow: auto;
    position: relative;
    border: 1px solid black;
    max-width: 320px;
    max-height: 640px;
    /* I don't know how to make my stuff appear without manually setting height like below */
    /* height: 1000px; */
    /* What I want is for frame_outer to expand automatically either until it hits the height of frame_inner or its max-height*/
}
.frame_inner {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
}
.my-col {
    list-style-type: none;
    float: left;
    margin: 0;
    border: 1px solid white;
    background: #eeeeee;
    width: 20%;
}
.inside-col {
    background: #ebe7eb;
    padding: 4px;
    margin-top: 100px;
    border: solid #808080 1px;
    width: 90%;
    word-wrap: break-word;
    display: inline-block;
}

Answer 1

问题的发生是因为 frame_inner 对其有绝对定位。

删除它并仅提供 width 和 float 属性使其出现在 frame_outer 中。而且它是水平和垂直滚动的。

这是我更新的类，

.frame_inner {
    float:left;
    width: 150%;
}

检查更新的 JSFIDDLE

希望这能解决您的问题。