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

Question

我遇到了 Safari 如何处理某些 Flexbox 元素的错误。在 Chrome 中，所有元素都包含在 DIV 中并得到正确处理。在 Safari 中，DIV 内唯一的内容是 SVG，其余两个元素被强制退出并恰好从 DIV 边距结束的位置开始。

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

Safari 中是否有一些与 Chrome 不同的处理 flex DIV 的方法，而我自己可能没有学到？任何帮助表示赞赏。谢谢。我尝试设置伸缩收缩和增长，添加不同的位置或显示设置，甚至尝试 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 浏览器，因此无法提供更准确的信息。