Canaries, legends, and heights

Have been working on a site and all of a sudden, this morning, it was broken.

AAAAHH!!!! Run around in a panick.

Then I noticed it was only broken in Chrome Canary (their dev browser) and the break was very specific: <legend> tags were having a height applied to them, perhaps inherited from their parent <fieldset> tag? The numbers didn’t add up, so it was hard to tell. Also, it only caused obvious display problems if the legends were being displayed as their own block instead of part of the field set border, but on inspection the blocks were still sized incorrectly behind the scenes.

Finally narrowed it down to a bug in Canary when I,

a. tested it in all the other browsers on my desktop, and
b. turned off all style sheets including browser defaults and the extra height was still there.

Block of mushed plain text, huge gap, more mushed plain text, repeat.

Now, I don’t except to have many users of the site on Canary. In fact, I expect to have zero. It is an internal site. We know our demographics. But if the problem propagates down into Chrome, that would be a problem.

Besides, it bugged me, so it had to be fixed.

So, off to the Google-machine to see what it said, and much testing of various combinations. Nothing made me happy, so I went back to roots and reviewed the possible values for the CSS height property. This turned out to be a good thing, because, well, I hadn’t given the height property much attention in a long time.

Lo and behold, there are a whole bunch of new keywords you can assign to height. (If you are looking at W3Schools, walk away, they haven’t updated their stuff in ages.) The keyword I wanted here was fit-content.

Now, fit-content supposedly only works in Chrome, but my bug is in Chrome so … problem still solved. The only problem I foresee might be issues of not wanting the content to display in full in some situations, in which case, you can play with some of the other new height values.

Nutshell

If you are getting weird problems with boxes having heights that won’t go away in Chrome, try setting

height: fit-content;

to the problematic block.