Блог

У меня есть div с таблицей в нем. Для div установлено значение overflow:auto. Строки можно добавлять в таблицу динамически. Div — это гибкий элемент в родительском столбце с flex-direction: , он настроен так, чтобы занимать 80% высоты.

                     <div class="tableWrapper">
                    <table id="second" cellspacing="0">
                        <thead>
                            ...
                        </thead>
                        <tbody>
                            ...
                        </tbody>
                    </table>
                    </div>
 

 .tableWrapper{
    flex-basis:80%; /* This is the height */
    overflow-y:auto;
    display:flex;
    width:100%;
}

table{
    width:100%;
}

th{
    text-align:center;
    font-weight:bold;
}

th, td{
    height:3em;
    vertical-align:middle;
    text-align:center;
    font-weight:bold;
}
 

Таблица начинается пустой с добавлением данных. Когда количество строк превышает высоту / гибкую основу контейнера, контейнер одновременно переполняется полосой прокрутки и увеличивается в высоту. Обычно я добавляю строки ~ 5 или 6 одновременно.

Это в Firefox и Opera. Safari на iPad OS обрабатывает это, как и ожидалось.

Упс, забыл правило, которое полностью имеет смысл.

Применение переполнения: скрыто в родительском элементе страницы, конечно, исправлена проблема переполнения с помощью flexbox.