Let’s start with a simple piece of code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, /> <title>Document</title> <style>. margin-bottom: 20px; } .left { width: 50px; background-color: #f00; } .right { flex-grow: 1; display: flex; flex-wrap: wrap; } </style> </head> <body> <div id="app"> <div class="container"> <div class="left">50</div> <div class="right">Last</div> </div> <div class="container"> <div class="left">50</div> <div class="right"> <label> this is a very, very long sentence, this is a very, very long sentence, </label> <label> this is a very, very long sentence, This is a very, very long sentence </label> <label> this is a very, very long sentence </label> </div> </div> </body> </ HTML >Copy the code

Create a random HTML file and copy this, and you’ll see the following image

As you can see, the second 50, which is already taking up space, is less than 50px wide.

What’s going on here? Does the width property have no effect?

It was Flex.

Consider one property: flex-shrink.

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.Copy the code

It is this property that causes Flex items to be shrunk by default.

Therefore, flex-shrink: 0 is required in all fixed-width items.

So, hit the key, the next interview when asked to write double column layout or three column layout, the fixed width of the item do not forget to add this attribute, the interviewer saw you asked (did not see their own say), the same flex layout, you know so much, this is not a bonus tip.