Flex 容器的子容器超过了父容器

Question

我在使用 React Native 和 flexbox 时遇到了一个奇怪的情况。

在这种情况下，我不明白为什么x按钮超出了它们的容器（cyan背景），尽管有 flexWrap。

我希望x按钮返回到青色容器内的行，如标题（但按钮a b c d必须保持在右侧，这样效果很好）。

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

为了包裹item_container必须知道宽度。

chart_container有 2 个孩子chart和item_container. 第一个孩子的chart宽度是固定的100，第二个孩子必须填充其余的空间才能包裹孩子。

item_container: {
  flex: 1,
  backgroundColor: "green",
  flexDirection: "row",
  flexWrap: "wrap"
},