具有动态内容的两个相邻 DIV。一个包装内容，另一个滚动溢出答案

【问题标题】：Two adjacent DIVs with dynamic content. One wrap content, other scroll overflow具有动态内容的两个相邻 DIV。一个包装内容，另一个滚动溢出
【发布时间】：2019-05-13 09:04:20
【问题描述】：

我必须显示 2 个相邻的框，它们都有动态内容（使用角度渲染）。 Container 的高度必须为 Box1。 Box2s 高度可能因动态而异，不应高于 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 中不起作用，因为（正如我在网上看到的）position 没有为表格定义（不是 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。

【问题讨论】：

标签： html css dynamic height

【解决方案1】：

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

没有办法在同一个父级中对齐高度。因此，我建议您将#Box2 与#Box1 包装在一起，如下所示。

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

您可以将max-height: 100%; 设置为#Box2，这样#Box2 的最大高度就不会大于#Box1。

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

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

【讨论】：

太棒了！但是我们可以有动态宽度吗？
@Emaborsa 您可以将width 相对于其父级#Container 的百分比设置为#Box1，甚至将width 设置为100% 并让#Container 完成这项工作。之后，您可以将width 设置为#Box2 相对于#Box1 的百分比我已经更新了codepen。
并非如此。我在页面中有其他代码，可以大于Container。看看这个codepen.io/Emaborsa/pen/BvNXNr
@Emaborsa 对不起，我不明白你的情况。 #Container 无论如何都可以是一个单独的块。您可以将其设置为自己的width，将width 设置为父级，甚至使用flex。