在包裹子容器后，使flex容器将宽度调整为其子容器，而不是其父容器

Question

我有一个带有两个子元素的flex容器，当我的屏幕变小时，这些元素需要包装。问题是，我希望我的flex容器不断调整其宽度以适应内容，即内部的子元素，而不是父元素。我尝试过使用display: inline-flex，当孩子们排成一行时它就可以工作，不幸的是，当他们被包裹时它就停止了工作。

如何在使用flex-wrap: wrap属性的同时实现灵活容器根据其内容进行调整？

Codepen

Answer 1

.....
<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>
.....