Flexbox funky padding demo in Safari for desktop.

bennadel · bennadel · commit 343295862474 · 2019-05-30T07:25:15.000-04:00
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [Desktop Safari Seems To Add Extra Padding To CSS Flexbox Item Inside List Item](https://bennadel.github.io/JavaScript-Demos/demos/safari-li-flexbox-wonky/)
 * [Trying To Center A Text-Overflow Ellipsis Using CSS Flexbox In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/center-ellipsis-angular7/)
 * [Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox](https://bennadel.github.io/JavaScript-Demos/demos/cast-list-flexbox2/)
 * [Styling A Movie Cast List Using A Definition List And Flexbox](https://bennadel.github.io/JavaScript-Demos/demos/cast-list-flexbox/)
diff --git a/demos/safari-li-flexbox-wonky/index.htm b/demos/safari-li-flexbox-wonky/index.htm
@@ -0,0 +1,53 @@
+<!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 ;
+			white-space: nowrap ;
+		}
+
+		.flexbox-item2 {
+			border: 2px solid blue ;
+			white-space: nowrap ;
+		}
+
+	</style>
+
+</body>
+</html>
