Analysis and solution of flex layout collapse caused by Chrome 73

Phenomenon

There are several nested flex structures in the project:

<style>
  /* General style */
  .card {
    width: 200px;
    height: 300px;
    margin: 20px;
    border: 1px solid #999;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  .header {
    flex: none;
    height: 40px;
    border-bottom: 1px solid #333;
  }
  .scroll {
    overflow-y: auto;
  }
  .p {
    margin: 10px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.2);
  }  
</style>
  
<!-- Layout 1-->
<div class="card flex">
  <div class="header">Header</div>
  <div class="flex">
    <div class="scroll">
      <div class="p"></div>
    </div>
  </div>
</div>
  
<!-- Layout 2-->
<div class="card flex">
  <div class="flex">
    <div class="header">Header</div>
    <div class="scroll" style="flex-grow:1;">
      <div class="p"></div>
    </div>
  </div>
</div>

This is how it actually worked before Chrome 73 (using Electron — Chrome 69):

These are all expected results. Scroll is the scrollable area. However, the display effect of Chrome 73 is as follows:

The height of the parent element is stretched by the child element, causing the scroll element to be unable to scroll. what? why?

reason

The reason for this is that the explanation of the height in the specification is briefly summarized as follows:

The minimum size of a flex item (either height or width, depending on the main axis) is the size of its inner content. That is, the default value of min-height/min-width is "auto".

emmm...Read "standard" a thousand times and its meaning will become clear. After understanding this conclusion again and again, it seems that the implementation of the new version of Chrome is in compliance with the specification! Indeed, Chrome's change is intended to make the browser's flex layout behavior closer to the specification.

This issue in the Chrome community: Flexbox rendering changed between chrome 71 and 72, had a heated discussion on the above problem (Layout 2), and even eventually led to an official rollback.

As to why we were slow to realize the problem and it wasn’t exposed on a large scale until 73, the following highlights will explain it in detail.

However, following the norms is completely politically correct, and everything is right! Developers can only change with the trend.

repair

In fact, after seeing this phenomenon, I didn’t feel too shocked, because min-width had already given me some preparatory lessons (see the following highlights for details). So I found a way to liberate myself very quickly.

Find the outermost element that is stretched. In the above two layouts, it is the direct parent element of scroll. Adding the attribute min-height: 0 to it can fix the abnormal layout.

If the behavior of min-height is really incomprehensible, overflow: hidden (non-visible) can achieve the same effect. Overflow is usually used more often, and it will feel more physical, as shown in the following example:

<div style="height: 200px;overflow: scroll;">
  <div style="height: 400px"></div>
</div>

When overflow:hidden/scroll is set for a parent element, the parent element will hide the overflow part of the child element when it is displayed.

Of course, the actual function of overflow in flex layout is to set min-height to 0.

In addition, you can also fix this by setting height: 100% on the child element, that is, the scroll element in the example above. However, when there are many levels, the attribute needs to be passed down layer by layer, which is not environmentally friendly.

Highlights

The problem was successfully fixed, here are some episodes~

1. Chrome 71->72->73

This change was first introduced in Chrome 72, but why didn’t we notice it until Chrome 73? After the release of Chrome 72, due to the strong response, Chrome decided to roll back the changes first to give developers more time to adapt to the changes.

However, the release of Chrome 72 and the subsequent rollback of 72 occurred during the Chinese New Year holiday, and there was little user feedback. For Chinese developers, such as me, I did not notice this warning at all. . .

2. Min-width preschool education

Why do I say that I have been educated in advance by min-width?

I have implemented a tab similar to the editor:

Here is the nested flex horizontal layout. Under the default style, the scrolling area will be stretched by the child elements. It was at this time that I first experienced the min-width: 0 writing method, which I thought was very strange at the time.

So why do you need to explicitly declare the min-width of the parent element at that time? In addition, the accidental injuries caused by this upgrade all occurred on the flex of the vertical layout. Does it have any impact on the flex of the horizontal layout?

The answer is actually quite ridiculous, because Chrome’s default value for min-width has been set to “auto” in line with the specification since a very early stage. . .

refer to

1. Flexbox sets height of inside element to 0
2. MDN min-height
3. MDN min-width

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. Thank you for your support of 123WORDPRESS.COM.