Skip to main content
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Michael Kassing and Simon Free and Steve Johnson
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Michael Kassing Simon Free Steve Johnson

Desktop Safari Seems To Add Extra Padding To CSS Flexbox Item Inside List Item

By
Published in Comments (4)

Earlier this morning, in a post about trying to center-align a text-overflow: ellipsis effect using CSS Flexbox, I mentioned that I ran into a really odd desktop Safari behavior that appeared to add extra padding to the first Flexbox item if it was contained within a list item. When I Googled for this, I didn't find anything; so, I just wanted to share the behavior here for anyone else who might be searching for it.

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

The code for this demonstration is quite simple. I have a CSS Flexbox container that has two items. And, each of the items has a border. Then, I render this Flexbox container twice: once in the top-level BODY tag and once in an LI tag:

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />

	<title>
		Desktop Safari Seems To Add Extra Padding To CSS Flexbox Item Inside List Item
	</title>
</head>
<body>

	<h1>
		Desktop Safari Seems To Add Extra Padding To CSS Flexbox Item Inside List Item
	</h1>

	<!-- A simple Flexbox container in the DOM. -->
	<div class="flexbox-container">
		<span class="flexbox-item1">I am the first item</span>
		<span class="flexbox-item2">I am the second item</span>
	</div>

	<ul>
		<li>

			<!-- The SAME simple Flexbox container, this time in a UL/LI context. -->
			<div class="flexbox-container">
				<span class="flexbox-item1">I am the first item</span>
				<span class="flexbox-item2">I am the second item</span>
			</div>

		</li>
	</ul>

	<style type="text/css">
		
		.flexbox-container {
			display: flex ;
		}

		.flexbox-item1 {
			border: 2px solid red ;
		}

		.flexbox-item2 {
			border: 2px solid blue ;
		}

	</style>

</body>
</html>

Here is this demo when rendered in Chrome or Firefox:

A Flexbox container renders the same in and out of an LI element as demonstrated in Chrome and Firefox.

As you can see, the CSS Flexbox container has the same exact rendering both inside and outside the LI element. Just as you would expect it to.

This even renders almost correctly in IE 11. To be fair, the Flexbox element does render properly in IE 11; but, there is a strange top-padding within the LI element, above the Flexbox container.

Now, here's the same page, rendered in Safari, Version 12.1.1 (13607.2.6.1.2):

The first Flexbox container item has extra padding when rendering in an LI in Safari for Desktop.

As you can see, when rendered in the top-level BODY tag, the CSS Flexbox container renders fine in Safari. However, when that same exact Flexbox container is rendered inside of an LI element, the first Flexbox item has some mysterious right-padding of about 7px.

I could not figure out how to get rid of this padding. None of the CSS that I added to the LI or to the Flexbox elements seemed to make any difference. The only thing I could figure out was literally to not use an LI element with a Flexbox child.

Sorry that this post isn't about a solution to the problem - it's just here to let others on the Googles know that they are not alone. The struggle is real!

Want to use code from this post? Check out the license.

Reader Comments

15,902 Comments

@Dan,

I tried having the <span></span><span></span> butt-up against each other, but that didn't seem to make a difference :(

16 Comments

Applying list-style-type: none to the LI element fixes the issue for me. The culprit seems to be the list marker. Notice how if you change list-style-type (from disc) to other values, the space at the end of the first flex item also changes in accordance with the currently rendered marker. This is a weird bug.

15,902 Comments

@Šime,

Whoa, that is really weird :D I never would have even thought to try changing the marker type. But, good to know that removing the list-styling fixes the bug. Because, in reality, I use display: flex inside of a ul like all the time, but usually with a list-style-type:none. As such, this is a big relief that I don't have a lot of breaking UIs out there somewhere.

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel