場景： 元素分為左右兩塊，左邊元素定寬，右邊元素自動充滿屏幕。

flex布局中設(shè)置寬度被壓縮的問題

當(dāng)子元素設(shè)置固定寬度，如果整體寬度不足時(shí)，會把固定寬度給壓縮，解決方法: 給固定寬度的元素添加flex-shrink:0。

flex-shrink
指定了 flex 元素的收縮規(guī)則。

設(shè)置flex屬性時(shí)子元素寬度超出父元素

設(shè)置右邊元素flex：1，當(dāng)右邊元素寬度超過父元素時(shí)，會造成右邊寬度溢出。

解決方案：給右側(cè)設(shè)置了flex:1;的元素，同時(shí)設(shè)置width:0

.right {
    width: 0;
    flex: 1;
}