Scaled box results in child elements collapsing on each other.

[oveddan]

Given this code, tryable in this sandbox where I want to scale a box and all of it's children down:

     <Flex flexDirection="row">
        <Box flexDirection="column" scale-x={0.5} scale-y={0.5}>
          <Box>
            <mesh>
              <meshBasicMaterial color="yellow" />
              <boxBufferGeometry />
            </mesh>
          </Box>
          <Box>
            <mesh>
              <meshBasicMaterial color="red" />
              <boxBufferGeometry />
            </mesh>
          </Box>
        </Box>
      </Flex>

The resulting scene looks like:

When I'd expect the boxes to not be collapsed on each other, but stacked vertically.

Is there a way to scale down a box properly and have its children properly aligned?

[saitonakamura]

That looks like a bug, but i'm not sure why this is happening, i'll take a look