Не допускайте расширения дочернего элемента вне родительского элемента

Question

Я потратил много времени на это и не смог найти жизнеспособного решения, но мне кажется, что я упускаю что-то очевидное.

У меня есть компонент таблицы, который может содержать большое количество рядов; это неопределенное количество высоты; он настроен на автоматическое определение его высоты на основе количества строк в нем; это <Table /> компонент через комплект реагирования .

Вместо того, чтобы вечно опускать Таблицу go, я не хочу, чтобы таблица переполнялась со страницы и ограничивала ее. видимая высота внутри родительского div.

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

Что бы я ни пытался сделать, я не смог сохранить его внутри родительского div.

Answer 1

Для прокрутки переполнения требуются 2 базовых c условия * Контейнер 1001 *

• должен иметь конечную высоту, отличную от процента, или его предок должен иметь контейнер
• с настройками переполнение : прокрутка / авто, также есть переполнение-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>