Repository navigation
Width: auto on flex containers not taking the full space available #44
Description
Activity
- changed the title
[-]Width: auto on column direction flex containers not taking the full space available[/-][+]Width: auto on flex containers not taking the full space available[/+]on Mar 19, 2021 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 asstretch. 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?
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