Pain points

Element flex: 1; And then if the content goes beyond that you have no control over scrolling or anything. Although I came up with a compromise: position:relative; The position Absolute child element solves this problem. But you’re still adding one more div.

Data reference

  1. So went to check zhang Xinxu big guy flex statement; Flex :0; Flex: None produces a completely different effect from what I’m testing in my current browser. So maybe some of the rules have changed again, and you can’t help it. We can only search again.
  2. The big guy; The Flex calculation is still based on the content in it, but the rules may be different each time. Based on the width/height; –> Based on the spindle direction; –> Based on the content concept. It goes through several stages and may change later.

The solution

  1. Set overflow:hidden(or min-width:0); So that the parent element doesn’t have more than one, and all the children are scaled by their width to take up all the space.

  1. Set the width: 0; This way, each element is not based on its own content length, but rather bisects the entire parent element

Flex: 1: position:relative The child element sets position:absolute; 4. Use grid layout. This is really convenient, because before Flex is fully sufficient, grid properties are many. I don’t want to use it. But forced myself to write two pages, can only say really sweet.

conclusion

Let’s make a note here. If I don’t explore why this Flex overflows, I’ll probably always use Position to fix it. Technology enough is just the basis, in case which day was seen as the age of seniors, the result of a problem can not say a 123. A little awkward! It’s not a bad thing to think about it sometimes.

The resources

  1. The eye has a coveted
  2. Zhang Xinxu – Xin Life
  3. mozilla