Flexbox Div 不包含 Safari 中的所有元素，但在 Chrome 中运行良好

Posted 2023-03-05

技术标签:

【中文标题】Flexbox Div 不包含 Safari 中的所有元素，但在 Chrome 中运行良好【英文标题】：Flexbox Div not containing all elements in Safari, but works fine in Chrome 【发布时间】：2018-06-22 04:08:29 【问题描述】：

我遇到了一个关于 Safari 如何处理一些 flexbox 元素的错误。在 Chrome 中，所有元素都包含在 DIV 中并得到正确处理。在 Safari 中，DIV 中唯一的东西是 SVG，剩下的两个元素被强制退出并从 DIV 的边距结束处开始。

我什至尝试将 SVG 换成 PNG，但似乎并非如此。当开发工具中的非代码真正触发它甚至更接近它应该是什么时，很难找出可能导致它的原因。没有额外的填充，即使清除媒体查询，它仍然是一团糟。我有一个脚本，它在构建 SASS 时将所有前缀添加到 CSS，当我把它拿出来时，它仍然执行完全相同的行为。

在 Safari 中是否有一些东西可以与 Chrome 不同，而我自己可能没有学会处理弹性 DIV？任何帮助表示赞赏。谢谢你。我尝试设置 flex 收缩和增长，添加不同的位置或显示设置，甚至尝试 DIV 中的其他元素。

这是 Chrome 中的 DIV 的图像，它很好且包含。

这里是在 Safari 中，外面有两个元素。

这里是直播网站的链接 link

这里是代码github的链接

这里是特定 DIV 及其元素的代码。

.miirhelp 
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 8rem;


	&__box 
		height: 21rem;
		width: 21rem;
		margin: 5rem; 

		display: flex;
		flex-direction: column;
		align-items: center;

		&-logo 
			max-height: 100%;
			max-width: 100%;
		

		&-text 
			font-size: 1.5rem;
			font-weight: 700;
		

		&-btn 
			background-color: #fff;
			color: var(--color-grey-dark-1);
			margin-top: 1rem;
			margin-left: 1rem;
			border: none;
			font-size: 1.2rem;
			cursor: pointer;
			text-decoration: none;
		

		@media screen and (max-width: 1244px) 
			margin: 1rem;
		

		@media screen and (max-width: 950px) 
			margin: 0rem 0rem;
		
		@media screen and (max-width: 850px) 
			margin: 0rem 4rem;
		
		@media screen and (min-width: 1200px) 
			height: 23rem;
			width: 23rem;
			margin: 3rem;
		
		@media screen and (min-width: 1600px) 
			height: 30rem;
			width: 30rem;

【问题讨论】：

问题可能是嵌套的弹性盒子 - safari 真的不喜欢它们，我也发现如果我在所有列上放一个类，它们的高度不会相等 - 我只是如果我希望其他列的高度相等，则允许在最高的列上放置一个类！（我为 safari 用户写了一个非常肮脏的 js hack） 【参考方案1】：

虽然这听起来很愚蠢，但我唯一可行的解决方案是在每个断点处为 SVG 设置一个特定的高度。我刚刚进入 Chrome，在每个断点找到它的高度，然后手动确保它被硬编码到这些高度。 Safari 显然在缩放和处理整个 flexbox 方面存在问题。

非常感谢您的帮助，我希望这篇文章可以帮助其他遇到同样愚蠢问题的人。

【讨论】：

【参考方案2】：

根据flexbox specification，弹性项目的初始设置应该是flex-shrink: 1。这意味着允许弹性项目收缩以避免溢出容器。

Chrome 似乎遵守此准则。

也许 Safari 将默认设置为flex-shrink: 0？这将允许项目在没有足够空间时溢出容器。

所以将flex-shrink: 1 添加到.selfhelp__box 的子项中。

如果这不起作用，请将min-height: 0 添加到.selfhelp__box 的子项中。

解释如下：Why don't flex items shrink past content size?