CODEWITHSUNDEEP
cssreactjsreact-native
Gaylord.P
Gaylord.P

Reputation: 1468

The children of a flex container exceed the parent

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.

enter image description here

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

Upvotes: 6

Views: 3254

Answers (3)

JC Palmes
JC Palmes

Reputation: 21

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

Upvotes: 0

Bilal
Bilal

Reputation: 19156

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"
},

Upvotes: 1

jsdeveloper
jsdeveloper

Reputation: 4045

It appears to behave when you unset the flex shrink property: https://codesandbox.io/s/billowing-cdn-dbbxm

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

Upvotes: 2

Related Questions