I have a situation with an h3 element where I am unsure of its width. As a result, the width is set to auto by default. However, I need the text inside this element to have hyphenation applied to it. This h3 element is within a flex container along with another element, and the flex container has a fixed width. Everything works correctly in most browsers, except for Safari. In Safari, the hyphenation does not work at all - the text overflows and even pushes the second element out of the wrapper. The only way it works in Safari is when I manually set the width of the h3 element to a specific value, like width: 300px or width: 80%, but unfortunately, this is not feasible in my case. Removing the display:flex property also solves the issue in Safari, but that is not something I want to do.
To illustrate the problem, here's a simple example:
.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 lang="de">
<head>
</head>
<body>
<div class="card">
<h3>Versicherungsmaklerbüro/Versicherungsmaklerinnenbüro</h3>
<button>
Button
</button>
</div>
</body>
</html>Is there a CSS-only solution to make Safari behave as expected?