我发现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?
flex: 0 1 100%
。不要再将子元素设置为flex: 1; max-width: 100%
。 - Michael Benjaminflex: 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