Odd flex behavior on <summary> in Safari

dabblet.css

/**
 * Odd flex behavior on <summary> in Safari
 */

summary {
	display: flex;
}

summary strong { background: yellow; }
summary span { background: pink; }

dabblet.html

<details>
	<summary>
		<strong>Foo</strong>
		<span>Bar</span>
	</summary>
	Content
</details>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}