Have two elements on 1 row but keep different heights

Question

I am trying to have two elements on 1 row, both with different heights. Flexbox seems to be adjusting the height of all elements when the other element's height adjust.

Any suggestions?

Sample Code:

<View style={{flex: 1, flexDirection: 'row'}}>
  <View style={{flex: 1}}>
    <Text>Some Content with a longer height</Text>
  </View>
  <View style={{flex: 1}}>
    <Text>Some Content with now the same height</Text>
  </View>
</View>

Do you have an image or mockup of what you are trying to achieve? Thanks. — Nader Dabit, Jun 06 '16 at 03:37
possible duplicate: http://stackoverflow.com/q/33034660/3597276 — Michael Benjamin, Jun 06 '16 at 04:12
I'll check this out although it might not be a 1-1 because of react-native — chapinkapa, Jun 06 '16 at 21:28

Robert · Accepted Answer · 2016-06-06T14:49:50.157

Flex box is designed to use the available space that you provide, which is why it is so great for scaling from desktop to tablet to mobile.

If you want elements in a row to have separate heights, you can simply specify that a flex item have a different height like this (here's a fiddle of it: https://jsfiddle.net/ur0pesmd/1/):

HTML

<div class = "container">
  <div class = "flexCol"></div>
  <div class = "flexCol" id = "smaller"></div>
</div>

CSS

.container{
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      background: #fff;
  width: 400px;
  height: 200px;
}

.flexCol{
  flex: 1 1 auto;
  background: #f00;
}

#smaller{
  flex: 2 1 auto;
  background: #0f0;
  height: 80%;
}

Have two elements on 1 row but keep different heights

1 Answers1