Safari下width设为auto时-webkit-hyphens:auto失效，求纯CSS解决办法

我有一个<h3>元素，无法指定固定宽度（使用默认width: auto），希望其中的文本能够自动断字。该元素与另一个元素共同处于固定宽度的flex容器中，此设置在除Safari外的所有浏览器中均可正常工作，但在Safari中，断字功能完全失效，文本会溢出并将第二个元素挤出容器。尝试过给<h3>设置具体宽度或移除display: flex能解决问题，但这两种操作都无法执行。

示例代码 #

CSS代码

.card {
  display: flex;
  align-items: flex-start;
  border: 1px solid #ddd;
  width: 200px;
}

h3 {
  flex: 1;
  background: #ff5604;
  hyphens: auto;
  -webkit-hyphens: auto;
}

button {
  display: inline-block;
}

HTML代码

<html lang="de">
<head>
</head>
<body>
  <div class="card">
    <h3>Versicherungsmaklerbüro/Versicherungsmaklerinnenbüro</h3>
    <button>
        Button
      </button>
  </div>
</body>
</html>

纯CSS解决方案 #

给<h3>元素添加min-width: 0属性，修改后的CSS如下：

h3 {
  flex: 1;
  background: #ff5604;
  hyphens: auto;
  -webkit-hyphens: auto;
  min-width: 0; /* 关键设置：允许flex项目收缩到内容宽度以下 */
}

原理说明

Safari中flex项目默认的min-width: auto会阻止元素收缩到其内容宽度以下，即使设置了flex:1也无法让元素适配容器剩余空间，导致文本无法触发断字。添加min-width: 0后，flex项目会允许收缩到容器分配的宽度内，此时hyphens: auto就能正常生效，实现自动断字。

同时需确保HTML根元素的lang属性正确设置（示例中已设置lang="de"），因为自动断字规则依赖对应的语言字典。

内容的提问来源于stack exchange，提问作者Juuro