calc-size(auto) not working when parent element has display:flex;
Hi, i know calc-size(auto) is an experimental feature so maybe that's why. but i have realized that you cannot animate height:0; > height:calc-size(auto); if parent element had
display:flex; probably wont work with grid either. I'm just wondering why, is it just because it's an experimental feature? Or is it a bug? Or is there any solution to this?
Video that shows the issue:8 Replies
Short answer: I'm pretty sure it's just not supported yet in chrome's test implementation. Long answer: Here are the Web Platform Tests for
calc-size(). Of note is that there are about 1000 animation tests that don't yep pass in Chrome. I'm guessing a test for what you're talking about is in there somewhere: https://wpt.fyi/results/css/css-values/calc-size?label=master&label=experimental&aligned&q=calc-sizei'm not using chrome, i use edge. And as you can see, calc-size(auto) works just fine for me. i have enabled
Experimental Web Platform Features flag. So it works just fine as seen in the video. But it just does not work when i have display:flex; on parentmy bad was using chromium and chrome interchangeably. The Edge implementation though looks identical to chrome's (all the same tests pass and fail) so it's likely one of those properties that is just straight up chromium added to both browsers. Yes, i see from the vid that it stops working when you add flex to the parent. That does seem broken but as you noted its a test implementation right now so hard to know if they have missed this or it's just not implemented yet. https://issues.chromium.org would be the place to look for an open bug or open one if you don't see one.
Oh alright, that's what i expected, thanks for the info ! š
@Tok124 (CSS Nerd) so a little follow up it appears that
calc-size() is now live in chrome stable 129 https://chromestatus.com/roadmap i guess i thought you were talking about a beta version.
i wonder if the issue in you pen is that auto isn't the keyword being used for height on the flex item? Honestly not sure what it would be.
maybe try stretch?Yeah currently it does not seem to be much information about the calc-size, but yeah it could be that auto is the wrong value when parent have display:flex; yeah. I will try with stretch and see if that works
could you gave a link to that codepen?
sounds like there were some changes to the way calc-size() works: https://www.youtube.com/watch?v=lXZE1vrXM1A
CSS Weekly
YouTube
Enable NEW CSS Transitions Behavior
Find out how to enable new CSS transitions behavior that allows you to transition to intrinsic sizing keywords like "height: auto;" and how calc-size() implementation changed.
š Links
Primer on calc-size() function: https://youtu.be/1VsMKz4Zweg
Demo: https://codepen.io/ZoranJambor/pen/JjQQEmo?layout=left
GitHub Issue: https://github.com/w3c/css...