html - 两个相邻的具有动态内容的DIV。一个包装内容，其他滚动溢出

我必须显示2个相邻的框，两个框都具有动态内容（使用角度渲染）。 Container的高度必须为Box1。 Box2的高度可能会因动态而有所不同，并且不应高于Box1。如果更高，则应显示滚动条。

我从使用表开始以下代码：

<table id="Container">
    <tr>
        <td valign="top" id="Box1">
            <dynamic rendered html code/>
        <td>
        <td>&nbsp;<td>
        <td valign="top" style="position: relative; id="Box2">
            <div style="position: absolute; top:0; bottom:0; overflow-x: hidden">
                <dynamic rendered html code/>
            </div>
        <td>
    </tr>
</table>

不幸的是，它在IE中不起作用，因为（如我在网络上所读的那样）未为表定义位置（不是HTML标准）；

因此，我决定切换到div：

<div id="Container">
    <div style="display: inline-block; vertical-align:top" id="Box1">
        <dynamic rendered html code/>
    <div>
    <div style="display: inline-block;">&nbsp;<div>
    <div style="display: inline-block; vertical-align:top" id="Box2">
        <dynamic rendered html code/>
    <div>
</div>

Box1应始终包装其内容。 Box2不应比Box1高，如果滚动溢出。
CSS可能吗？没有JQuery，也没有Javascript。

最佳答案

我相信您希望#Box2的高度等于#Box1的高度。

无法在同一父级中对齐高度。因此，建议您将#Box2用#Box1包裹起来，如下所示。

<div id="Box1">
    <div id="Box2">
    </div>
</div>

并且可以将max-height: 100%;设置为#Box2，以使#Box2的最大高度不会大于#Box1。

将overflow-x: auto;添加到#Box2可以在文本溢出时自动显示滚动条。

https://codepen.io/blackcityhenry/pen/LMVoZd

关于html - 两个相邻的具有动态内容的DIV。一个包装内容，其他滚动溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53739971/