Closed olivierpascal closed 1 month ago
In the meantime, I use flexBasis: '0.0%'
, which is compiled correctly.
How are 0%
and 0px
different in practice? Can you try using a non-zero value and see that it works as expected?
We have a value minification process that tries to avoid having multiple variants of equivalent values. e.g. we want to avoid 0
and 0px
and 0%
to all be in the CSS bundle, so we try to normalize them to the same format when it doesn't change behaviour.
That's an excellent question. I don't know how they are different in practice. But they are, and my code works with '0%' and does not work with '0px' :x
I will try to make a reproducible example.
Here it is:
https://codepen.io/opascal/pen/MWRwNpb
CSS, switch lines 36 and 37, you will see that flex-basis: 0%
differs from flex-basis: 0px
.
Thanks for the example. While, this is a convincing argument for making a change, I did want to point something out.
If you read about flex-basis
on MDN, you'll see that if you use a percentage value, it calculates the actual size based on the size of the containing element. In your example, the container doesn't have an explicit height and instead gets it's height from the flex child itself. If you set an explicit height, then 0% does behave the same as 0 and 0px.
So, at least in your example, flex-basis: 0%
is having no effect at all since the percentage value cannot be resolved.
I'm convinced I need to make a change to match the behavior of CSS, but it is important to know that whenever 0% behaves differently than 0 or 0px, it is likely not being used at all.
@nmn I believe this can be closed as well 😄
Describe the issue
flexBasis: '0%'
is compiled toflex-basis: 0px
, which is not equivalentExpected behavior
flexBasis: '0%'
to be compiled toflex-basis: 0%
Steps to reproduce
Test case
No response
Additional comments
No response