Почему не растягивается блок?

Question

[Преподаватель программирования]

есть общий контейнер в котором флексбокс-колонкой выровнены три блока

в средний блок двумя способами подгружается содержимое

но при загрузке через ajax-запрос средий блок не растягивается и остается прежнего размера
основной контейнер прокручивается и нижний блок улетает наверх

а при вставке содержимого на php-сервере все нормально

на десктопе всё нормально, а в айосе такой глюк

код очень простой:

css для контейнера:

width: 100%;
height: 100%;
flex-direction:column;
overflow: auto;
justify-content:space-between;

css для среднего блока:

width: 100%;
height: 100%;

Comments

[Rustam Bainazarov]

Код где?

[Модератор]

https://toster.ru/help/rules
3.2

Вставьте сокращенный код, который показывает проблему

[Преподаватель программирования]

Рустам Байназаров, добавил

код простейший

Answer 1

[Антон Усачев]

Css для среднего блока нужно сделать похожим примерно на это:

.middle-block {
    flex: 1 1 auto;
    // или, если там иные задачи
    flex: 1 1 100%;
}

Высоту для него убрать, задать overflow: hidden;, а если нужна прокрутка внутри блока, то лучше уже в него вставить дополнительный контейнер с высотой 100%, которому уже задать overflow: auto;

Comments

[Преподаватель программирования]

спасибо

добавил это и заработало:

flex-shrink:0;

[Антон Усачев]

tosrer, проверь на ios и осле, я сейчас не помню, но кто-то из них не любит короткие записи. Так что может пригодится запись типа flex: 1 0 auto;, где 0 это как раз flex-shrink.