sly sinew
In a single row, 2 boxes : one is 100px width, the other one fill in the remaining space.
I code it like that :
<Flex h={50}>
<Box w={100} bg="red"/>
<Box sx={{ flexGrow : 1 }} bg="blue" />
</Flex>
What bothers me is sx={{ flexGrow : 1 }}
Is there a way write this code even shorter ? maybe with other Mantine components ?
sharp spruce
perhaps you want a Grid, then you can set widths pretty straightforwardly and also make them responsive
https://mantine.dev/core/grid/#auto-sized-columns
https://mantine.dev/core/grid/#change-columns-count
sly sinew
Thank you, indeed it is interesting even if you have to wrap with <Grid.Col> for each child. But it is a viable alternative