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

Question

我遇到了一个关于Safari如何处理某些flexbox元素的错误。在Chrome中，所有元素都包含在DIV中并且处理得当。在Safari中，DIV内部唯一的东西就是SVG，剩下的两个元素被强行取出并准确地从DIV边缘结束的地方开始。

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

在Safari中是否有某些东西可以处理弯曲的DIV而不是我自己可能没有学过的Chrome？任何帮助表示赞赏。谢谢。我尝试设置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

根据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?

如果这不起作用，可以采取以下几种疑难解答提示：Flexbox code working on all browsers except Safari. Why?

希望其中一个解决方案有效。我现在无法访问Safari浏览器，因此我无法更准确。

Answer 2

这听起来很愚蠢，我唯一能解决的问题是在每个断点处设置SVG的特定高度。我刚进入Chrome，在每个断点找到它的高度，然后手动确保它被硬编码到那些高度。 Safari显然存在扩展和处理整个Flexbox的问题。

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