• 在日常布局中，最常用的可能就是flex布局，当使用flex进行两栏布局时，出现flex项目被内容撑开的情况:
    正常情况下，左边宽度固定flex-grow：0，右边flex-grow设置为1，自动填充flex盒子的剩余空间
    image
    此时表现正常，但是在right盒子中装入子元素，宽度设置为数值，让子元素溢出且不允许flex盒子换行时，right盒子会被其内容撑开，出现滚动条：
    image
    如果right盒子中装入的元素宽度设置为百分比，那么虽然也会出现滚动条，但是right盒子没有别撑开，百分比是相对于没有撑开的宽度：
    image
    如果内部盒子包含文本，那么如果没有给flex盒子和flex项目设置宽度的话，那么flex盒子和包含文本的元素依然会被文本撑开：
    image
    解决办法也简单，只需要给flex项目设置width:0或者非auto值即可，因为设置了自适应，所以宽度为零时，会自动填充以补满display为flex元素

前端菜鸟，不知道原理，只能记住方法，望大佬指点