诡异的 `height: intrinsic`

我厂最新也是最重要的产品 OpenResty XRay 即将开始邀请测试，所以官网上自然要添加对应的网页。目前该网页已经部署到生产环境，大家可以访问 https://openresty.com.cn/cn/xray/ 简单了解一下。

这个页面的最下面，“信任与合规”区块是一些标准化组织的认证，按照需求应该放几个 logo。然后我就很自然的用 display: flex 来做了。在桌面浏览器显示正常。

但是在 iPhone Safari 上，上面的两个图标会变得瘦长，看起来是高度计算有问题。我尝试修复这个问题，却除了写明高度，只有 height: intrinsic 可以让它显示正常。去 MDN 一搜，竟然没有这个属性？！只提到 max-content 和 min-content 两种“intrinsic”的属性。

在 caniuse 上，可以看到 intrinsic 是个非标准化的属性，应该是以前浏览器自发实现过，后来被 max-content 和 min-content 取代。但是为何 Safari 明明支持这几个属性，但是只有 height: intrinsic 能显示正常，我就不知道了，也没有查到。

先记一下吧，将来再看。如果有同学遇到类似的，图片在 display:flex 横排时尺寸出现问题，可以试试这个。