防止子元素在父div外部扩展

我花了很多时间在此上,还没有找到可行的解决方案,但是我觉得我缺少明显的东西。

I have a table component that can hold a large amount of rows; it is an undetermined amount of height; it is set to automatically determine it's height based on the amount of row in it; it's the <Table /> component through react suite.

我不会让表格永远在页面上掉下来,而不会让表格从页面上溢出并限制其可见高度在父div内。

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

无论我尝试做什么,都无法将其保留在该父div中。

评论
  • znon
    znon 回复

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

    • container must have a finite height other than percentage or its ancestor have
    • container have a settings of overflow: scroll/auto, there is also overflow-y if you want to scroll vertical only. You may refer to the link for detailed specification.

    下面的示例使用具有最小设置的单独类来说明该概念。表格被设置为一个高度,以模拟它很长,而背景色则用来显示其面积。

    .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>