CSS flex column wrap inside flex row

I have a between keyboard and chair issue with CSS flexbox when nesting two flexboxes.

The body of my HTML document is a flexbox occupying exactly the viewport, so that main can stretch to what header does not take. The header includes a navigation, that I put into a wrapping flexbox.

Everything works as intended in the portrait setup with navigation on top (body is flex-flow: column nowrap and the ul in header is flex-flow: row wrap).

However, in landscape design (body is flex-flow: row nowrap and ulm flex-flow: column wrap), the ul overflow in x unless I manually set its width.

Here is a minimal code displaying the unintended behaviour under firefox 131.

* {  margin: 0;  box-sizing: border-box;}body {  display: flex;  flex-flow: row nowrap;  width: 100vw;  height: 100vh;}main {  flex: 1 0;}/* Header overflows in x when flex ul wraps instead of adapting its width. Desired behaviour only if I set ul width manually. */header {  background: DimGrey;  height: 100%;  overflow-x: scroll;}ul {  display: flex;  flex-flow: column wrap;  height: 100%;}li {  list-style: none;  padding: 2ex;  margin: .5ex;  background: white;}

<header><ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul></header><main><h1>Flex column wrap inside flex row wrap</h1></main>