The children of a flex container exceed the parent - css

Question

I encounter a strange situation with React Native and flexbox.
In this situation, I don't understand why the x buttons exceed their container (cyan background) despite a flexWrap.
I would like the x buttons to return to the row within the cyan container, like the title (But the buttons a b c d must stay on the right, this works fine).
https://codesandbox.io/s/lucid-dream-0q5yo?file=/src/App.js
class App extends Component {
render() {
return (
<View style={styles.container}>
<ListItem>
<ListItem.Content style={styles.content}>
<ListItem.Title>
My title My title My title My title My title My title My title My
title
</ListItem.Title>
<View style={styles.chart_container}>
<View style={styles.chart}></View>
<View style={styles.item_container}>
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
</View>
</View>
</ListItem.Content>
<View style={styles.cell_last}>
<View style={styles.options_container}>
<Button title="a" />
<Button title="b" />
<Button title="c" />
<Button title="d" />
</View>
</View>
</ListItem>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: "400px"
},
content: {
backgroundColor: "cyan"
},
chart_container: {
flexDirection: "row"
},
chart: {
backgroundColor: "red",
width: 100,
height: 100
},
item_container: {
backgroundColor: "green",
flexDirection: "row",
flexWrap: "wrap"
},
cell_last: {
alignItems: "flex-end",
alignSelf: "flex-start"
},
options_container: {
flexDirection: "row",
justifyContent: "flex-end"
}
});

Answer 1

In order to wrap item_container must know the width.
chart_container got 2 child chart and item_container. First child chart got fixed width 100, second child must fill rest of the space in order to do the wrap children.
item_container: {
flex: 1,
backgroundColor: "green",
flexDirection: "row",
flexWrap: "wrap"
},

Answer 2

It appears to behave when you unset the flex shrink property: https://codesandbox.io/s/billowing-cdn-dbbxm
chart_container: {
flexDirection: "row",
flexShrink: 1
},

Answer 3

Since you already have the container set to a fixed width of 400px and the chart to 100px you will need to set a width for item_container as well. I added a calc function to subtract the width of the chart from the overall width of the container and set that as the width of item_container although you can set a fixed 300px width to it too. You can check everything here: https://codesandbox.io/s/funny-kare-3x0q4
item_container: {
alignItems: "center",
backgroundColor: "green",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-evenly",
width: "calc(100% - 100px)"
},