Отображение FlatList
 

Есть контейнер

paddingVertical: 10,
        paddingHorizontal: 10,
        borderRadius: 8,
        marginVertical: 8,
        flexDirection: 'column',
        width: '100%',
        overflow: "hidden",
        flex: 1,
        borderColor: 'green',
        borderWidth: 2,

в нём еще по 2 контейнера

в 1 контейнере

height: "auto",
        maxHeight: "70%",

в 2 контейнере

flex:1

В самих контейнерах по FlatList
Выглядит вот так
Вложение 4999
Дочерние элементы отображаются правильно.
Но когда они доходят до maxHeight: "70%" они начинают отображаться криво. Торчат следующие элементы
Вложение 5000
Как это можно поправить?

Суть задачи.
На экране 2 контейнера которые содержат по Flatlist, верхний контейнер должен быть по высоте дочерних элементов, но не больше 70% основного контейнера
А нижний контейнер оставшиеся пространство.