Flex layout collapses the map to zero height

• map.getSize() returns Point {x: 1280, y: 0}.
• Only the container border is visible, with tiles compressed into a single thin line.
• map.getCenter() and map.getZoom() return exactly the configured values.

1. Walk up from #map printing clientHeight and computed display until the first zero-height ancestor.
2. Check whether html and body both have height: 100%.
3. Check whether the flex child lacks min-height: 0.
4. Check whether the map was initialised while the panel was hidden.

Give html, body and .layout height: 100%, set the map wrapper to flex: 1 1 auto with min-height: 0 and position: absolute inset: 0 on #map, then call map.invalidateSize({ animate: false }) from a ResizeObserver.

console.log(map.getSize());
// Point {x: 1280, y: 0}

var el = document.getElementById('map');
var node = el;
while (node && node !== document.documentElement) {
  console.log(node.tagName, node.className, node.clientHeight, getComputedStyle(node).display);
  node = node.parentElement;
}

• Setting #map { height: 100vh } under a 56 px header overflows the viewport and adds a scrollbar instead of fixing the layout.
• Creating the map inside a hidden tab and never calling invalidateSize leaves it drawing at the original zero size.