flex 容器的子级超过父级答案

【问题标题】：The children of a flex container exceed the parentflex 容器的子级超过父级
【发布时间】：2021-03-03 01:22:14
【问题描述】：

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

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

我希望x 按钮返回到青色容器内的行，就像标题一样工作正常）。

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"
  }
});

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

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

chart_container 有 2 个孩子 chart 和 item_container。第一个孩子chart 得到固定宽度100，第二个孩子必须填满剩余的空间才能包裹孩子。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

很抱歉，结果看起来一样，x 按钮始终显示在链接中的单行上：/
是的，当您在开发工具控制台上切换值时它可以工作，但它似乎在重新加载时不起作用.. :(
在反应原生应用程序中，它不适用于flexShrink：/

【解决方案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)"
  },

【讨论】：