demar
demar

Reputation: 514

Safari (iOS and OSX) doesn't display position: absolute inside flexbox

I have a project, where I am using position: absolute to place names on a leaderboard. This is inside a div which has scroll: auto and is also a flexbox (from Bootstrap). This works fine on Chrome, however trying to use this on Safari ends up with the names simply not appearing.

I have a JS fiddle of a simplified version here: https://jsfiddle.net/gfbu0aez/4/

If you open it in Chrome, the numbers appear just fine, but opening it in Safari results in nothing appearing.

Upvotes: 1

Views: 1793

Answers (1)

Sarreph
Sarreph

Reputation: 2015

Remove height: 100%; from your .container class, as flex-grow: 1; already does what you need.

See this question / answer for more details.

Upvotes: 2

Related Questions