Flexbox: How to make children the same width as the parent?

Question

In my React Native app, I'm having trouble with making the children the same width as the parent. Please see image below:

I want the black and the green View to take the whole screen width, therefore get rid of the white background caused by the parent.

How can I achieve this? For example, I tried to apply width: 100% to the children, doesn't work. Several solutions like this, this and this don't work here.

Here is the code:

    <View style={styles.containerWholePage}>
      <View>
        <View style={styles.upper}></View>
        <View style={styles.lower}></View>
      </View>
    </View>

const styles = StyleSheet.create({
  containerWholePage: {
    alignItems: 'center',
  },
  lower: {
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: 'green',
    flex: 6,
    width: '100%', // doesn't work
  },
  upper: {
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: 'black',
    flex: 3,
    width: '100%', // doesn't work
  },
});

Do you have an idea what I'm doing wrong?

Put a background on the container the parent `` element and focus on getting those to take up the full width. The children should follow naturally. Start with the top-most container. — Ryan Wheale, Jun 04 '20 at 14:57
@RyanWheale Now I gave the container a red background plus width:'100%'. The only thing that changes is the white background is now red >. — RuntimeError, Jun 04 '20 at 15:01
Questions seeking code help must include the **shortest code** necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Jun 04 '20 at 15:11
Now give a background to the lone `` element and make sure it is 100% width. — Ryan Wheale, Jun 04 '20 at 15:57
@RyanWheale Added this. Now the whole screen appears white xD — RuntimeError, Jun 04 '20 at 16:18

score 1 · Accepted Answer · answered Jun 04 '20 at 16:23

This work for me as you want.

    <View style={styles.containerWholePage}>
  {/* <View> */}
    <View style={styles.upper}></View>
    <View style={styles.lower}></View>
  {/* </View> */}
</View>
const styles = StyleSheet.create({
containerWholePage: {
  alignItems: 'center',
  flex:1,
},
lower: {
  alignItems: 'center',
  alignSelf: 'stretch',
  backgroundColor: 'green',
 // height:100,
  flex: 6,
  width: '100%', // doesn't work
},
upper: {
  alignItems: 'center',
  alignSelf: 'stretch',
  backgroundColor: 'black',
   flex: 3,
//height:200,
  width: '100%', // doesn't work
},

});

Flexbox: How to make children the same width as the parent?

1 Answers1