flex容器的子容器超过父容器。

Question

我遇到了一个奇怪的情况，反应本土和柔韧盒。

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

​

​

我希望x按钮返回到cyan容器中的行，就像标题一样(但是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"
},

Answer 2

当您取消设置flex收缩属性：https://codesandbox.io/s/billowing-cdn-dbbxm时，它似乎会运行。

  chart_container: {
    flexDirection: "row",
    flexShrink: 1
  },

Answer 3

由于容器已经设置为固定宽度的400px，而chart设置为100px，因此还需要为item_container设置一个宽度。我添加了一个calc函数，从容器的总体宽度中减去图表的宽度，并将其设置为item_container的宽度，尽管您也可以将固定的300px宽度设置为它。您可以在这里检查所有内容：https://codesandbox.io/s/funny-kare-3x0q4

  item_container: {
    alignItems: "center",
    backgroundColor: "green",
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-evenly",
    width: "calc(100% - 100px)"
  },