在彈性布局中，有一種情況是左邊設定乙個子元素固定寬度，右邊設定自適應佔滿剩餘空間，但有時候會發現左邊固定元素的寬度竟然失效了，被右邊的元素擠占空間了，所以仔細檢視flex屬性的特點後，發現少設定了一些屬性樣式。
父元素設定完 display:flex 屬性後；
子元素設定固定寬度：
width:50px;
height:50px; 複製**
flex-grow:此屬性為是否自動增長空間，flex-shrink;此屬性為是否自動縮小空間，
預設值都是1，即自動增長/縮小，
設定為0時，不會自動增長/縮小
flex-grow:0;
flex-shrink:0;
防止固定大小的元素寬度發生變化
螢幕的寬度 網格布局比例失效？元素預設寬度的鍋
以下內容是基於沒有設定一套相對較完整的用於reset html css預設樣式的一番吃力debug，當是乙個教訓啦 問題 響應式使用網格布局時，當螢幕縮小到一定寬度，網格比例便開始失去控制，內容開始溢位如下圖 手機號碼 css must fill原因分析 網格布局中包含的元素有其對應的預設最小寬度，...
flex布局中，子標籤超出父標籤
flex布局中，一側故寬，另一側flex 1後，自元件撐開超出父元件 大致是有乙個main容器是flex布局，左邊乙個logo固定寬高，右邊content動態寬度。main logo content content notice notice可能會非常長，一些裝置下需要隱藏顯示，即不換行，並留下省略...
flex布局下overflow失效解決方案
這裡使用經典的兩欄布局 比如說我們想讓中間部分自適應並且超出長度出現滾動 dom結構簡單如下 class container class left div class content span span span div class right div div 樣式檔案這裡就直接使用less寫了 c...