So overflow-wrap: break-word and CSS Grid don't work well together. But using minmax(0, 1fr) instead of just 1fr fixes it.
This defaults the min-width of the column to 0 instead of auto. For whatever reason, min-width: auto causes problems.
<div class="grid">
<div><p>Without <code>minmax(0, 1fr)</code></p></div>
<div><p>This div contains a very long word: someveryveryveryveryveryverylongword</p></div>
</div>
<div class="grid grid-2">
<div><p>With <code>minmax(0, 1fr)</code></p></div>
<div><p>This div contains a very long word: someveryveryveryveryveryverylongword</p></div>
</div>.grid {
display: grid;
/* this doesn't work... */
grid-template-columns: 1fr 1fr;
gap: 8px;
max-width: 400px;
margin-bottom: 8px;
}
.grid div {
/* overflow-wrap: break-word isn't working... */
overflow-wrap: break-word;
border: 3px dashed #FF0000;
}
.grid-2 {
/* this DOES work... */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}falseResult