CSS

Cooper Gidge on May 28, 2025.

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;
}

false

Result

Browsers CSS Web Dev

Safari is a Difficult Browser to Work With

Author

Cooper Gidge

Date

Mar 31, 2025

Using margin on a CSS Grid child doesn't work well with aspect-ratio on iOS 18.3.2. My latest of many discoveries that contribute to my complicated relationship with Safari and mobile web development.

Read Article

CSS Web Dev

Cooper Gidge on Mar 22, 2025.

Links with a different color underline are cool. I couldn't tell you why I like them. I just do.

Here is how I normally style my links for projects:

<p class="style-1">
    Here is a paragraph with <a>some great hanging underlines</a>. Here is <a>another link</a> for your linking pleasure.
</p>
<p class="style-2">
    Here is yet another paragraph with <a>some great links without hanging underlines</a>. Here is <a>another link</a> for your linking pleasure.
</p>

/* The link styles */
.style-1 a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #FF0000;
    text-underline-position: under;
}
.style-2 a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #FF0000;
}
/* Extra styles for the demo */
p {
    font-family: sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
}
a {
    cursor: pointer;
}
a:hover {
    color: #FF0000;
}