Make flex container adjust width to its children instead of its parent after children are wrapped

Question

I've got flex container with two children elements that need to wrap when my screen gets smaller. The problem is that I want my flex container to keep adjusting its width to content i.e. to children inside instead of parent element. I tried using display: inline-flex and it works when children fit into one line, unfortunately it stops working when they got wrapped.

How can I achieve flex container adjusting to its content while using flex-wrap: wrap property?

Codepen

Great question! Could you share relevant CSS and HTML code? I suspect that it will help contributors find a solution that works for you. — Yves Gurcan, Apr 12 '21 at 16:21

score 0 · Answer 1 · answered Apr 12 '21 at 16:22

.....
<View 
style={{flex:1,flexDirection:'row',flex-wrap:'wrap',justifyContent:'space-between'}}>
      <View style={{width:'30%'}}>
         <Text>Text1</Text>
      </View>
      <View style={{width:'30%'}}>
         <Text>Text2</Text>
      </View> 
      <View style={{width:'30%'}}>
         <Text>Text3</Text>
      </View>
      <View style={{width:'30%'}}>
         <Text>Text4</Text>
      </View>
</View>
.....

Make flex container adjust width to its children instead of its parent after children are wrapped

1 Answers1