Html 如何使外部div溢出：自动扩展到其内容的高度达到某一点？

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

可能值得一提的是，我之所以选择frame_outer，首先是因为有时我希望frame_inner的内容水平扩展，而不会吹出页面的侧面（因此

溢出：frame_outer上的auto

）

我试过以各种方式玩

clear:both

，

height:auto

，

display:block

，但似乎没有任何效果

菲德尔密码：

HTML:

---

移除

位置：绝对位置来自
.frame\u inner
对我有效
问题之所以发生，是因为frame\u inner对它有绝对的位置

删除该属性并只提供宽度和浮动属性，使其显示在帧_外部。而且它是水平和垂直滚动的

这是我更新的课程


.frame\u内部{
浮动：左；
宽度：150%；
}
试试这个

$(".frame_outer").css("height",$(".frame_inner").css("height"));

太简单了！我会检查它是否破坏了我的任何其他代码，如果没有，我会接受你的答案。如果有，我需要更新我的问题。谢谢OP询问css/标记解决方案。此外，他也没有使用像JQuery这样的javascript库。使用css，只有在从frame_inner删除绝对位置后，才能执行此操作，这就是问题所在。因此，无需添加第三方库来处理该问题。这个解决方案可以工作，但它不适合这种特定情况（用户没有jquery，用户可以修改css和html）。
.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;
}

$(".frame_outer").css("height",$(".frame_inner").css("height"));