So, setting flex: 1 causes a problem in cases where you have borders or padding on some of your elements. Both of those situations are terrible, so instead of looking at the box-size of elements when calculating the base size of them, it only looks at the content-box! If the browser looked at the width of those elements and included their padding and borders in the calculations, how could it shrink things down? Either the padding would also have to shrink or things are going to overflow the space. This is one of those strange quirks of CSS but it does make sense. One way we can try to get all the flex items to have the same base size is by declaring flex: 1 on all of them. Let’s look at two of the most common solutions that I see used in the wild, and I’ll explain why they don’t work. There are a few common ways to do this, but as I discovered while diving into all of this, I have come to believe those approaches are flawed. If they have an equal base size, then they will shrink (or grow, if we use flex-grow) at an equal rate when flexbox does it’s flex things, and in theory, that should make them the same size. For all the approaches, the basic idea is that we want to get all the columns base size to be the same. There are a few different ways to get the three columns we want to be equal in width, but some are better than others. It’s not often that we have nice round numbers like that in the real world, but I think this does a nice job illustrating how flexbox does what it does when figuring out how big to make things. If we divide everything by 2, it fits! They are all shrinking by the same rate, dividing their own widths by 2. If we add up all the base sizes of all three flex items (the actual widths we declared on them), the total comes out to 1200px.
The larger element with a base width of 600px becomes 300px. I’ve also switched out the border for an outline so we can still visualize everything easily. I’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 kommentar(er)
