Keep child element from expanding outside parent div

Question

I've spent a lot of time on this and haven't been able to find viable solution, but I feel like I'm missing something obvious.

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.

Instead of letting the Table go down the page forever, I wan't to make the table overflow off the page and constrain it's viewable height to be inside the parent div.

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

Whatever I've tried to do, I haven't been able to keep it inside that parent div.

Answer 1

The overflow scroll requires 2 basic conditions

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

The following example use a separate class with minimum settings to illustrate the concept. The table is set to a height to simulate it is very long while the background color used to show its area.

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