html - Flexbox Div 不包含 Safari 中的所有元素，但在 Chrome 中工作正常

Question

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

我什至尝试用 PNG 替换 SVG，但似乎并非如此。当开发工具中的代码没有真正触发它甚至更接近它应该是什么时，很难找出可能导致它的原因。没有额外的填充，甚至在清除媒体查询时，它仍然是乱七八糟的。我有一个脚本，在构建 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;
		}
	}
}

Answer 1

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

Chrome 似乎遵守了这条准则。

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

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

---

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

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

---

如果这不起作用，这里有一些更多的故障排除想法:Flexbox code working on all browsers except Safari. Why?

---

希望这些解决方案之一能够奏效。我现在无法访问 Safari 浏览器，所以我不能更准确。