在日常開發(fā)中可能會(huì)遇到父元素設(shè)置flex布局，子元素再去設(shè)置寬度無效的問題
當(dāng)子元素的寬度總和小于父元素的寬度的時(shí)候，是有效的。但是當(dāng)子元素寬度總和大于父元素寬度的時(shí)候测蘑。子元素的寬度就自適應(yīng)了。
造成此問題的原因是因?yàn)榭刀琭elx布局下有一個(gè)屬性flex-shrink
flex-shrink 屬性指定了 flex 元素的收縮規(guī)則碳胳。flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值沫勿。0代表不會(huì)收縮
解決辦法
1.子元素設(shè)置
flex: 0 0 50px;
2.子元素使用min-width代替width (此方法一般起不到很大的作用挨约，只能解決寬度失效的問題，但會(huì)帶來很多副作用：比如當(dāng)子元素內(nèi)容超出長(zhǎng)度是产雹，子元素的寬度就不再固定)
3.子元素設(shè)置
flex-shrink:0
此方法會(huì)導(dǎo)致父盒子的滾動(dòng)條失效诫惭，需要在父盒子外部再包一層父盒子。并且設(shè)置overflow: auto
