CSS to Limit Height of Embedded Github Gists

Ah, yes.

ME vs CASCADING STYLE SHEETS
~~~ Nov 14th, 2018 ~~~

🏁 FINAL SCORE 🏁
me: 1
css: 3 hours

🏆?

— Matthew Andres Moreno (@mmore500) November 14, 2018

Another day, another dollar.

🔗 The Problem

Today, I wanted to apply a maximum height to my Github Gist embeds. That way, I can embed long snippets into my blog posts without making the reader scroll 5 million miles to keep reading.

Fortunately, there are already some how-to’s out there.

Unfortunately, the Gist-related CSS snippets floating around on the web didn’t play nicely with a CSV gist I wanted to embed.

Github does some nifty magic to table-ify CSV files you post as Gists. Nice and all, but Github’s CSV magic makes applying your own styling more complicated.

Pasting in random snippets I found on Google alternately gave me some uggo double scroll bar action or hid the horizontal scroll bar way down yonder, so you have to scroll down through the gist to even see it.

Peep those uggo double scroll bars.

Yuck.

🔗 The Fix

I eventually realized that I couldn’t get around it: these nicely-rendered CSV tables need special treatment in the style sheet. Here’s the CSS that worked for me.

.gist .csv-data  {
  overflow:auto;
  max-height:350px;
}

.gist .file {
  max-height:400px;
  overflow:auto !important;
}

.gist .type-csv {
  overflow:hidden !important;
}

Below are some examples of that CSS in action on Gist embeds.