最新Safari上的Flexbox布局-压缩与拉伸内容
花粉
在下面的示例代码中，我有一个嵌套容器的复杂结构，该结构表示flex容器中的蓝色框。整个内容嵌套在滚动容器中。
问题是蓝色容器在Safari上被压缩了：
SO上有很多与此类问题有关的示例。大多数中公认的解决方案是增加flex-shrink: 0;
就我而言，这意味着向.stackchild和添加flex-shrink #StackChild。这是一个样式化的react组件，但是出于示例的目的，随机CSS类被替换为一个类和id只是为了加以区分。
当我添加flex-shrink: 0到时，stackchild我在所有浏览器上都遇到了另一个布局问题：
Tbh我不太确定这是怎么回事...知道为什么收缩道具会以这种方式破坏布局吗？以及如何解决这个问题，使所有浏览器都满意？
此处的代码示例：https : //codepen.io/pollx/pen/oNbmEoE
jps
在堆叠子对象旁边设置最小高度似乎可行。https://github.com/philipwalton/flexbugs
.stackchild {
display: inline-flex;
margin-top: calc(16px / 2);
margin-bottom: calc(16px / 2);
min-height: 0;
flex-shrink: 0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
隐藏发件人没有短信PHP
- 2
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 3
在浏览器中请求URL时会发生什么？
- 4
flask-admin 如何自定义删除按钮
- 5
材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）
- 6
用日期数据透视表和日期顺序查询
- 7
Jqgrid：多级别组摘要
- 8
java io ioexception无法解析服务器地址解析器的响应
- 9
Swift如何使用Base64Url编码JWT标头和有效负载之类的json对象
- 10
sshd AllowGroups组未授予访问权限
- 11
jQuery无限滚动固定div中的滚动
- 12
android 背部按下
- 13
Flexbox CSS 对齐属性环境惰性？
- 14
为什么随机森林中的平均降低基尼系数取决于人口规模？
- 15
ClickHouse 创建临时表
- 16
为什么PlusShare.Builder setRecipients方法不起作用？
- 17
如何在Android中识别MICR代码
- 18
PyQt4.QtCore模块无法向sip模块注册
- 19
正则表达式，用于查找所有以任何字母开头和数字开头的文件
- 20
是否可以通过编程方式对很多动画进行重新着色？
- 21
机器密钥生成
我来说两句