1

I have the following HTML:

<div class="grid">
    <div>
        <h1>
            Element with a really, really, really loooooooooong title
        </h1>
    </div>
    <div>
        Element 2
    </div>
</div>

And this is the CSS that I apply to it:

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}

.grid > div h1 {
    white-space: nowrap;
}

It seems that, however, the two columns do not have equal widths (1fr) as they should be (repeat(2, 1fr)) because of the h1 in the first element having white-space: nowrap.

On the other hand, if you change the grid-template-columns property to:

grid-template-columns: repeat(2, calc(50% - 1rem));

the grid then is visualized correctly.

Here's a fiddle for those of you who want to reproduce this by themselves.

My question is why is fr being ignored because of the nowrap property of a child element? Is this expected behavior or is it an issue with CSS grid itself?

Yulian
  • 6,262
  • 10
  • 65
  • 92
  • 2
    issue is css grid and flexbox have a min width/height equal to content, to fix this use `repeat(2, minmax(0,1fr))` to reset the min width or `min-width:0;` on the child elements – Rainbow Mar 20 '20 at 17:20
  • @ZohirSalak yes, it answers my questions, although I wouldn't consider it a duplicate. Anyway, thanks a lot for your help! – Yulian Mar 20 '20 at 18:51
  • 1
    Why wouldn't you consider it a duplicate ? `why is fr being ignored because of the nowrap property of a child element` it is not being ignored because of a certain property on a child it's not being ignored at all `1fr` is the equivalent of `minmax(auto,1fr)` it's like saying put my content first then split the overall width between elements in this case there's no overall width it all been consumed by the first element. – Rainbow Mar 20 '20 at 20:20

0 Answers0