The origin of

On January 29, 2019, Chrome72 was officially released (72.0.3626.81), which brought a change, not mentioned in the update log, that caused some websites to have their layout messed up. This change focuses on the nested Flex layout, so let’s take a look at what’s going on.

The problem

First, we have a nested Flex layout that looks like this:

<style>
div {
    box-sizing: border-box;
}
.flex {
    display: flex;
    flex-direction: column;
}
.area {
    padding: 10px;
    height: 300px;
    width: 300px;
    background-color: #3fb9ab;
    color: #fff;
}
.item {
    padding: 10px;
    flex: 1;
    background-color: #158c7e;
}
.nest-item {
    flex: 1;
    overflow: auto;
    background-color: #046b5f;
}
.content {
    padding: 10px;
    height: 600px;
}
</style>
<div class="area flex">
    area
    <div class="item flex">
        item
        <div class="nest-item">
            <div class="content">content</div>
        </div>
    </div>
</div>
Copy the code

The parent container area has a specified height, and it is a Flex elastic box with an item child inside it, using Flex: Set overflow: auto to overflow, and item is a Flex box with a nest-item nested child element that also fills up. The effect is as follows:

The idea is simple: by setting the expansion ratio of the elastic box’s child elements, you get a container that automatically fills up the height of the remaining space, and then you put the content in that container. In some cases, this is actually a good idea, and it will display normally until Chrome72. But Chrome72.0.3626.81 shows the following:

trace

Why does this happen? Let’s take a look at the specification (drafts.csswg.org/css-flexbox…) The minimum size of the child element on the main axis of the Flex box is the size of the content (depending on the main axis direction as wide or high).

The main axis of the area is vertical, the minimum height of the child item is the height of the content, and the nest-item is separated by the Content. The content has a height (600px, exceeding the height of the container), so the minimum height of the item is more than 600px. As a result, the layers are stretched by the content and there are no scroll bars, which seems to be what the specification expects.

In chromium issue feedback, this problem was mentioned (bugs.chromium.org/p/chromium/…). According to the response, this is just what the authorities are doing to make Chrome more compliant with standard practices. In other words, this was a bug that didn’t follow the standard behavior for Chrome72 prior to release. The new adjustment is to apply min-height: min-content to the default behavior of a Flex box’s child element. As mentioned in the official reply, it is confusing to have a child element treated differently than a normal flex box.

The solution

Now that we know why, what can we do if we still want to use this layout?

Yes, we specify a minimum height for the item so that it does not use the default behavior (i.e. the height of the content). Generally we specify a minimum height of 0 min-height: 0. After applying this style to item, let’s take a look at the effect:

Well, that’s what we expected. To verify the behavior of the main axis mentioned in the specification, let’s modify the code and try to set the main axis to horizontal as follows:

<style>
div {
    box-sizing: border-box;
}
.flex {
    display: flex;
    flex-direction: row;
}
.area {
    padding: 10px;
    height: 300px;
    width: 300px;
    background-color: #3fb9ab;
    color: #fff;
}
.item {
    padding: 10px;
    flex: 1;
    background-color: #158c7e;
}
.nest-item {
    flex: 1;
    overflow: auto;
    background-color: #046b5f;
}
.content {
    padding: 10px;
    width: 600px;
}
</style>
<div class="area flex">
    area
    <div class="item flex">
        item
        <div class="nest-item">
            <div class="content">content</div>
        </div>
    </div>
</div>
Copy the code

The effect is as follows:

< span style = “max-width: 0” style = “max-width: 0” style = “box-sizing: border-box! Important;

Well, that’s what we expected.

conclusion

Okay, so now you know what’s going on, but wait, you said you upgraded to Chrome72 and didn’t see the problem?

That’s because officials noticed that the change would affect the normal display of some websites, so in Chrome72.0.3626.96, released on February 6, 2019 (just in time for the lunar New Year holiday), Will revert to the problem behavior before (chromium.googlesource.com/chromium/sr…). .

The official meaning is to avoid the bad impact of this change on some sites, so I will give you time to change it until Chrome73 releases the change. So check out your pages for a better browsing experience in the future!