Difference between `height:'100%', width: '100%'` vs. `Flex:1`

Question

Wondering what the differences between the two are, it was my assumption flex:1 expanded fully in both directions. But in a react-native app, if I have an <ImageBackground> with style of height:'100%', width: '100%' the child buttons are only as big as their inner text requires. but if the image background style is flex:1 the child buttons expand to full screen width.

here's is button styling:

btn: {
    paddingTop: "10rem",
    paddingBottom: "7rem",
    paddingHorizontal: "15rem",
    marginTop: "15rem",
    marginHorizontal: "20rem",
    backgroundColor: "#333",
    "@media ios": {
      borderRadius: 50
    },
    "@media android": {
      borderRadius: 50,
      elevation: 4
    },
    borderColor: "#fff",
    borderWidth: 0
  },
  btn_text: {
    color: "#fff",
    fontSize: "20rem",
    fontFamily: "BungeeInline-Regular",
    textAlign: "center"
  }

Details on the effect the container is having on its children in both scenarios?

Answer 1

Flex one has a few traits:

• It needs an explicit dimension set in one of its parents.
• It needs its direct parent to have display: flex.
• It will fit the parent's dimension, but will be affected by the parent's padding.
• It will be affected by sibling elements.

Assuming you have two flex: 1 sibling elements, then they will fill equal ratio inside the parent element (1/2 and 1/2). If it's a flex: 1 & flex: 2, then they will take up 1/3 and 2/3 of the space. If you have an element with explicit height and width as a sibling, then flex: 1 will fill up-to that sibling.