Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Doesn't show anything if any parent uses `display: grid;`

See original GitHub issue

If there’s a parent that uses display: grid; then this library doesn’t seem to render anything. I think it may have something to do with the max-height: -webkit-fill-available; that’s set on the img, as when I uncheck that it everything shows up.

Changing everything from Grid and adapting it to use Flexbox makes it work also.

After a little more testing it appears to break in:

  • Chrome Version 67.0.3396.99
  • Chrome Version 68.0.3440.84

But works in:

  • Firefox Version 61.0.1
  • Safari Version 11.1.1

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

Rainbowlemoncommented, Aug 15, 2018

I’ve just come across the same issue. Temporary fix was to just add max-height: inherit.

DominicTobiascommented, May 20, 2019

Ah that’s a shame, there’s not much I can do as fill-available is preferred in all cases where this isn’t a bug! I think for now you’ll just have to turn it off with CSS as you’ve done.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Grid properties not working on elements inside grid container
This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within...
Read more >
Basic concepts of grid layout - CSS: Cascading Style Sheets
CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user...
Read more >
A Complete Guide to CSS Grid
But don't worry, there aren't many of them. Grid Container. The element on which display: grid is applied. It's the direct parent of...
Read more >
CSS Grid Gotchas And Stumbling Blocks - Smashing Magazine
While we create our flex layout on the parent by setting display: flex all of the sizing needs to happen on the individual...
Read more >
Grid Cheatsheet
float and clear have no effect on a grid item. However, the float property still affects the computed value of display on children...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found