将 minHeight 与 flex 一起使用会产生意外的填充

Posted 2023-02-19

【中文标题】将 minHeight 与 flex 一起使用会产生意外的填充

【英文标题】：Using minHeight with flex creates unexpected padding

【发布时间】：2017-11-14 19:36:19

【问题描述】：

代码：

<View style= flex: 1, borderColor: 'orange', borderWidth: 5 >
    <View style= flex: 1, minHeight: 50, backgroundColor: 'skyblue', borderColor: 'blue', borderWidth: 5  />
    <View style= flex: 1, backgroundColor: 'pink', borderColor: 'red', borderWidth: 5  />
</View>

截图：

注意底部的空白。两个子视图不填充父视图。 这仅在添加 minHeight: 50 时发生。 空白的高度好像和minHeight的值一样。

环境：

“世博”：“^17.0.0”， “反应”：“16.0.0-alpha.6”， "react-native": "https://github.com/expo/react-native/archive/sdk-17.0.0.tar.gz",

真实设备，包括 iPhone 和 android。

【问题讨论】：

如果将minHeight: 0 添加到第二个元素会怎样？

另外，为了达到与minHeight: 50 与标准flexbox 类似的效果，将flex: 1 0 50px; 设置为第一个孩子，将flex: 1 1 50px; 设置为第二个

@LGSon 将minHeight 添加到第二个元素没有效果。

flex: 1 1 50px; 中的每个值是什么意思？

1 增长并占用可用空间，1 允许在没有可用空间时缩小，50px 高度为 50px，这意味着如果有空间，它将最小为 50px。第一项，第二个值（flex-shrink）有一个0，意思是最小50px，即使没有可用的地方也不缩小，这类似于minHeight所做的

【参考方案1】：

使用 flexGrow 代替 flex。下面给出了工作示例。

<View style= flexGrow: 1, borderColor: 'orange', borderWidth: 5 >
   <View style= flexGrow: 1, minHeight: 50, backgroundColor: 'skyblue', borderColor: 'blue', borderWidth: 5  />
   <View style= flexGrow: 1, backgroundColor: 'pink', borderColor: 'red', borderWidth: 5  />
</View>

这是截图。