在移動端，flex 布局很好用，它能夠根據裝置寬度來自動調整容器的寬度，用起來很方便，已經越來越離不開它，但是最近在做專案的時候發現乙個問題。
就是在乙個設定了 flex:1 的容器中，如果文字很長，這時候文字就會超出容器，而不是呆在設定好的動態剩餘的空間中。由於實際專案的比較複雜，不好拿出來說，這裡就把問題簡化描述如下：
大致是有乙個main容器是flex布局，左邊乙個logo固定寬高，右邊content動態寬度。
a name
a info
this is notice content.
12345678
.main
.logo
.content
.content > * 12345678910111213141516
.notice可能會非常長，一些裝置下需要隱藏顯示，即不換行，並留下省略符…作標記。
這裡會發現text-overflow: ellipsis不生效，省略符根本沒有出現。而且因為設定了 nowrap 會發現文字會將 content 撐開，導致內容超出了螢幕。所以必須要解決這個問題。
嘗試取消父元素.content的flex: 1，無效。
嘗試取消.main容器的display: flex，省略號出現。
因此猜測是flex布局的問題，進一步猜測省略符需要對父元素限定寬度。
嘗試對父元素.content設定width: 100%無效，但是設定width: 0可行。即：
.content 1234
如果不設定寬度，.content可以被子節點無限撐開；因此.notice總有足夠的寬度在一行內顯示所有文字，也就不能觸發截斷省略的效果。測試還有一種方法可以達到效果：
.content 1234
上面的二種方法都可以達到我們需要的效果，即給 content 設定了 flex 為 1 的時候，它會動態的獲得父容器的剩餘寬度，且不會被自己的子元素把內容撐開。
經過測試，以下的方法是無效的：
給html, body設定max-width，元素似乎能強行撐開頁寬；
給body設定overflow，頁寬不能被撐開了，但元素寬度還在，即元素本身還是溢位；
給html, body同時設定max-width和overflow，頁寬限定在max-width內，元素本身還是溢位；
給.main容器設定overflow: hidden，同理.main是不溢位了，.notice本身還是溢位；
給.notice元素設定width或max-width，雖然寬度受限，但在特定寬度下省略符…顯示不全，有時只顯示兩個點..
flex布局中，子標籤超出父標籤
flex布局中，一側故寬，另一側flex 1後，自元件撐開超出父元件 大致是有乙個main容器是flex布局，左邊乙個logo固定寬高，右邊content動態寬度。main logo content content notice notice可能會非常長，一些裝置下需要隱藏顯示，即不換行，並留下省略...
android 布局覆蓋 超出一部分 內容超出
內容審核 moderation 公測服務免費，商用服務費用低至 0.17 千次 內容審核 moderation 公測服務免費，商用服務費用低至 0.17 千次 alse，設定窗體不根據內容超出而調整窗體自身大小，以免窗體超出螢幕。autoscroll true，設定窗體當內容超出窗體時，自動產生滾動...
css3 flex 布局 寬度不生效
兩列布局專案中經常會用到，很多種方法可以做這樣的效果 但是最方便的還是要屬flex了，給外層父元素設定display flex 然後子元素，寬度自適應的那個設定 flex grow 1 另外乙個設定固定寬度就可以做到，乙個固定另乙個自適應了。具體 如下 lang en charset utf 8 n...