search

pmndrs / react-three-flex

💪📦 Flexbox for react-three-fiber
MIT License
1.65k stars 42 forks source link

Width: auto on flex containers not taking the full space available #44

Open afk-mario opened 3 years ago

afk-mario commented 3 years ago

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

afk-mario commented 3 years ago

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

giulioz commented 3 years ago

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?

afk-mario commented 3 years ago

Ah makes total sense thanks!

The bottom padding on the flex container

image

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

MaxTwentythree commented 3 years ago

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)

image

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? image