Есть контейнер
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
Выглядит вот так
1.jpg
Дочерние элементы отображаются правильно.
Но когда они доходят до maxHeight: "70%" они начинают отображаться криво. Торчат следующие элементы
2.jpg
Как это можно поправить?
Суть задачи.
На экране 2 контейнера которые содержат по Flatlist, верхний контейнер должен быть по высоте дочерних элементов, но не больше 70% основного контейнера
А нижний контейнер оставшиеся пространство.