On Kevin's recent FlexBox deep-dive
https://youtu.be/FD3aC_Ke8uk?si=wDDdxspRXQ2kqyTE
Should you read this, thank you Kevin for this video. I feel a bit shocked by it. Not only because I've worked with German text often and have suffered the long word overflow thing, but just generally at how CSS keeps these fundamentally important things perfectly hidden from someone aspiring to learn. It takes a real CSS expert like yourself, who also is a dev tool expert across different browsers, to explain why this happens. I find that somewhat disencouraging. There are way too many hidden defaults and truths in CSS to make learning it fun.
But more on topic: the key moment for me was the "Name:" vs "Your Name:" behaviour, and how the intrinsic width triggered a different outcome. That's honestly shocking..... I'm so glad to have understood why this is, as it's been a problem for me hundreds of times. I'm sure there is verbose and long CSS documentation on these things, somewhere, but they are very inaccessible typically, especially for less experienced developers.
ANYWAY, if I can ask one question, because this is something I still can't get my head around: I used to think for the longest time that intrinsic widths is concerned only with text characters, ie much like the ch unit. But seeing you do the input example, I suppose that's wrong.
Can Flexbox "detect" an intrinsic width of images, too? And then most importantly for me: what about SVGs? I can never seem to size these inside flexboxes, let alone outside flexboxes, to respond dynamically to their containers. They always overflow, especially in height. What is their intrinsic width? The one set in the viewbox property? Or is it 0 because it's a vector?
Sorry for the long message, and thanks if anyone reads this.
Should you read this, thank you Kevin for this video. I feel a bit shocked by it. Not only because I've worked with German text often and have suffered the long word overflow thing, but just generally at how CSS keeps these fundamentally important things perfectly hidden from someone aspiring to learn. It takes a real CSS expert like yourself, who also is a dev tool expert across different browsers, to explain why this happens. I find that somewhat disencouraging. There are way too many hidden defaults and truths in CSS to make learning it fun.
But more on topic: the key moment for me was the "Name:" vs "Your Name:" behaviour, and how the intrinsic width triggered a different outcome. That's honestly shocking..... I'm so glad to have understood why this is, as it's been a problem for me hundreds of times. I'm sure there is verbose and long CSS documentation on these things, somewhere, but they are very inaccessible typically, especially for less experienced developers.
ANYWAY, if I can ask one question, because this is something I still can't get my head around: I used to think for the longest time that intrinsic widths is concerned only with text characters, ie much like the ch unit. But seeing you do the input example, I suppose that's wrong.
Can Flexbox "detect" an intrinsic width of images, too? And then most importantly for me: what about SVGs? I can never seem to size these inside flexboxes, let alone outside flexboxes, to respond dynamically to their containers. They always overflow, especially in height. What is their intrinsic width? The one set in the viewbox property? Or is it 0 because it's a vector?
Sorry for the long message, and thanks if anyone reads this.
YouTubeKevin Powell
After Adam Wathan, and then @t3dotgg both posted and talked about the min-width: 0 thing, I've been getting a lot of questions about what I think about it. Rather than just share my own opinion on it (which we will get into), I saw it as a fun opportunity to dive into how Flexbox works and why this can sometimes solve some strange issues, but al...
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
