Safari弹性盒子文本换行问题

Question

Safari弹性盒子文本换行问题

10

我发现Safari（OS X）存在问题： https://codepen.io/alexlouden/pen/jONyZKb

document
  .querySelectorAll('.parent')
  .forEach(el => {
    el.addEventListener("mouseover", event => {
      event.target.style.color = 'blue';
    })
  })

* {
  box-sizing: border-box;
}
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  padding: 32px;
  background-color: #e99;
  margin: 32px;
  text-align: center;
}
.child {
  flex: 1;
  max-width: 100%;
  background-color: #99e;
}
.grandchild {
  overflow-wrap: break-word;
  border: 1px dotted black;
}

<div>
  In Safari, when you hover on the red area the XXXs will stop wrapping. <br/>
  Hover over the blue area and it will fix and re-wrap.
</div>

<div class="parent">
  <div class="child">
    <div class="grandchild">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    </div>
  </div>
</div>
<div class="parent">
  <div class="child">
    <div class="grandchild">
Centered
    </div>
  </div>
</div>

grandchild 似乎不尊重 child 的最大宽度限制，但只有在父元素的样式被修改时才出现此问题，而不是在首次加载时出现。

我想知道是什么原因导致了这种行为，以及这是否已经是 Safari 的已知问题，或者我应该报告这个 bug？

- Alex L

你试过使用完整的flex等效方式吗？尝试删除这两行代码，然后使用flex: 0 1 100%。不要再将子元素设置为flex: 1; max-width: 100%。 - Michael Benjamin

@Michael_B 谢谢你的建议！我刚试了 flex: 0 1 100%，flex: 1 0 100%（还加上了 flex-basis: auto 以确保），但都没有导致文本换行：https://imgur.com/a/0R23FpR。唯一能让文本换行的方法似乎是添加 min-width、width 或 max-width，但它们似乎都容易受到上述错误的影响！ - Alex L

你在.child上尝试使用了min-width: 0吗？ - Michael Benjamin

@Michael_B 是的，我很抱歉 - 没有运气！对于回复延迟感到抱歉！ - Alex L

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prajyot Tote · Accepted Answer

我想最初的回答比我想象的要简单得多 ':D !! 只需更改以下 CSS，它就可以正常工作 B)

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  padding: 32px;
  background-color: #e99;
  margin: 32px;
  text-align: center;
  overflow-wrap: break-word;
}