防止子元素扩展到父元素div之外

Question

我在这个问题上花了很多时间，一直没有找到可行的解决方案，但我觉得自己好像漏掉了一些明显的东西。

我有一个表组件，可以容纳大量的行，它的高度是不确定的，它的设置是根据里面的行数来自动确定它的高度，它的 <Table /> 组件通过反应套件.

与其让Table永远在页面上，不如让Table溢出页面，并将它的可查看高度限制在父div内。

<div style={{heigh: 30%}}>
     ....
     <Table autoHeight={true}/> //constrain inside height of parent div
</div>

无论我怎么做，我都无法让它保持在父 div 内。

Answer 1

溢出滚动需要2个基本条件

• 容器必须有一个有限的高度，而不是百分比，或者它的祖先有
• 容器的设置为 溢出： scrollauto，如果你只想垂直滚动，也有溢出-y。详细的说明可以参考链接。

下面的例子使用一个单独的类和最小的设置来说明这个概念。将表格设置成一个高度来模拟它很长，同时用背景色来显示它的面积。

.scroll-container {
            /** must have a finite height when using percentage, or its parent must be finit */
            height: 100px;
            overflow: auto;
        }

        table {
            background: red;
            height: 1000px;
            width: 100%;
        }

<div class="scroll-container">
     <table>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
     </table>
</div>