I’ve been tidying up a bit around here and (for the most part) restructured the entire style layer of Monday By Noon to be both mobile-first and Flexbox based. I’m officially smitten with Flexbox and use it quite a bit now. I got caught up on an issue as I was updating existing content, specifically the code snippets I’ve got scattered across the past 10 years running this site. I’m planning to update all of those snippets to embedded Gists because I’ve found that to be the most convenient and stable way to do it.
Right out of the gate I noticed something strange though; embedded gists were completely destroying the Flexbox layout. The gist was overtaking any concept of width as structured by the flexbox for its parent container.
I thought for sure it was a simple case of my misusing Flexbox at some fundamental level. There are multiple times when programming where I thought I understood a concept and implementation but everything was just “working by accident”. I took my usual approach of tinkering until something happened, and using that knowledge to dig deeper. After what amounted to being way too long I narrowed it down to a bit of CSS that came along with the Gist itself:
| .blob-code-inner { | |
| /* ... other styles removed for brevity */ | |
| white-space: pre; | |
| } |
With this rule in place, and the gist being embedded inside an element that’s within a Flexbox layout, the Gist will render as wide as the longest line of the source code. Expected behavior is that a horizontal scroll bar is put in place.
This issue isn’t directly related to Gists, it turns out my pre-formatted content that hadn’t been converted to Gist was doing the same thing.
I tried and failed to somehow override the rule, but ended up having to revert to good ol’ floats when it was time, so I leave this Pen here for posterity and also as a boiled down test case to determine when this is no longer an issue.
See the Pen Gists in Flexbox, too soon? by Jonathan Christopher (@jchristopher) on CodePen.
As you can see, the Flexbox layout embedded Gist expands to full width, which is not expected. The float-powered layout renders things correctly.
If the issue has been fixed, here’s a screenshot for reference.
