react-three-flex

react-three-flex copied to clipboard

I'm trying to make a column based layout where each row takes all the space available in the flex container if I set the width to be 100% the box overflows the flex parent container, if I use width="auto" the width of the child box is 0, in the Yoga layout demo works as expected.

Yoga Demo

three-flex demo

https://codesandbox.io/s/weathered-wildflower-9urbo?file=/src/styles.css

Also the bottom padding seems to be cut of not sure if that's my re flow logic

That's because you have set align="flex-start", whereas in the yoga example is set as stretch. Setting that and using auto width makes the box fill all the width.

What do you mean for the bottom padding to be cut?

Ah makes total sense thanks!

The bottom padding on the flex container

There should be a space between the last element and the border of the view port.

I think I have a similar issue

      <Flex
        justifyContent="center"
        alignItems="stretch"
        size={[size[0], size[1], 0]}
        padding={20}
      >
        <Box width="100%" height="100%">
          {(width, height): ReactElement<Mesh> => (
            <mesh>
              <planeBufferGeometry attach="geometry" args={[width, height]}/>
              <meshBasicMaterial color={green} />
            </mesh>
          )}
        </Box>
      </Flex>

(the Flex gets the same size as the white block)

Shouldn't the green rectangle be centered (paddings on each side) or am I doing sth wrong?

Edit: After replacing padding={20} with pr={20} pb={20} it works, but this not what I would expect ... so still the question: ist this a bug or am I doing sth wrong?