firefox/writing-mode-flexbox.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Writing mode / flexbox bug</title>
<style type="text/css">

body > * {
	border: 1px dotted red;
	}

header {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	}
header > * {
	writing-mode: sideways-lr;
	}
</style>
</head>
<body>

<header>
<h1>header h1</h1>
<h2>header h2</h2>
</header>

<main>
main

<p>The header (above) should have an <code>h1</code> and an <code>h2</code>.  The <code>h1</code> has been thrown <strong>waaaaay</strong> to the right, such that I can’t reach it via the scrollbar.</p>

<p>Furthermore, if you remove the <code>justify-content</code> from the header element, <em>both</em> heading elements will disappear, as will the horizontal scrollbar.  If it’s set to <code>center</code>, the <code>h1</code> will appear and the <code>h2</code> will disappear.</p>

<p>
If the <code>writing-mode</code> is set to be horizontal value, both headings will appear as expected.
</p>

</main>

</body>
</html>