7/13/2023 0 Comments Css make same size as elementI’ve removed anything that might influence the numbers, so no gap or padding. In the Pen below, we have a parent that’s a 600px wide flexible container ( display: flex). ![]() This makes figuring out what’s really going on a lot easier. When we declare a width on a flex item, we throw that intrinsic size out the window, as we’ve now declared an explicit value instead. We can do this by declaring widths on our flex items. Using Firefox’s DevTools (because it’s got some unique flexbox visualizations that others don’t), we can actually see how flexbox is calculating everything.įor simplicity’s sake, as we dive deeper into this, let’s work with some nice round numbers. That’s because flexbox starts by looking at the content size of each flex item before even thinking about shrinking them. Going back to our design scenario where we need three equal columns beneath a hero, we saw that the columns aren’t equal widths. Without it, things would get messy pretty quickly. This is why flex-shrink has a default value of 1. If it’s a long enough paragraph, then you end up with some horizontal scrolling. If you have a paragraph, the width of that paragraph will be the text inside it without any line breaks. So, bottom line, max-content allows the content itself to define the width of the element. Uri Shaked aptly describes the behavior by saying “the browser pretends it has infinite space, and lays all the text in a single line while measuring its width.” Intrinsic might throw you off here, but it basically means we’re letting the content decide on the width, rather than us explicitly setting a set width. For text content this means that the content will not wrap at all even if it causes overflows. The max-content sizing keyword represents the intrinsic maximum width of the content. So let’s strip away flexbox for a moment and look at what max-content does on its own. Max-content is a pretty handy property value in certain situations, but we want to understand how it works in this particular situation where we are trying to get three seemingly simple equal columns. ![]() To really understand what’s going on, let’s break those two down and see how they work together. ![]() But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but only if needed. It first looks at the content size which is what we would get if by declaring width: max-content on an element. Wait, what? Flex shrinks things by default - that can’t be right! Right?Īs awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. But in reality, flexbox actually wants things to be as big as possible. It feels like flex wants things to be as small as possible. In other words, we get some block-level elements shrinking down and slotting next to one another.
0 Comments
Leave a Reply. |