1. 第一次遇到這個(gè)問題的場景
先看效果圖，大家可以看一下下面的樣式，很明顯左邊和右邊的盒子我是給的定寬，但是被擠壓了
這個(gè)是我在項(xiàng)目中遇到的一個(gè)bug，使用的 flex 布局，由于我動(dòng)態(tài)的修改綠色盒子的顯示與隱藏，導(dǎo)致兩邊盒子的擠壓
<style>
.container {
width: 1400px;
display: flex;
height: 100vh;
}
.box1 {
background-color: red;
width: 300px;
}
.box2 {
background-color: yellow;
flex: 1;
}
.box3 {
background-color: green;
width: 400px;
}
</style>
<div class="container">
<div class="box1"></div>
<div class="box2">
<div>
...el-table
</div>
</div>
<div class="box3 none"></div>
</div>
2. 第二種情況
很明顯，紅色的盒子沒有300px文章來源：http://www.zghlxwxcb.cn/news/detail-434020.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-434020.html
<style>
.container {
display: flex;
width: 600px;
height: 600px;
}
.box1 {
background-color: red;
width: 300px;
}
.box2 {
background-color: yellow;
flex: 1;
}
</style>
<div class="container">
<div class="box1"></div>
<div class="box2">Loremipsumdolorsitametconsecteturadipisicingelit.Quasi,eveniet?</div>
</div>
3. 問題原因
- 首先了解一下
flex: n;的定義，當(dāng)使用單值語法的時(shí)候，可以理解為就是設(shè)置了flex: n 1 0;對應(yīng)的flex-grow: n; flex-shrink: 1; flex-basis: 0;，這里我們只探究flex-grow: n; - flex-grow：規(guī)定了項(xiàng)在 flex 容器中分配剩余空間的相對比例，這里的剩余空間指的是除內(nèi)容之外的空間
- 而上面兩種情況：
- 情況一：由于
flex-grow只能使當(dāng)前元素生效，而子元素的寬度也就是當(dāng)前元素的內(nèi)容，在 el-table 中第一次讀取寬度后，會給子元素設(shè)置固定寬度，進(jìn)而導(dǎo)致沒有剩余空間，也就是當(dāng)內(nèi)容空間大于剩余空間時(shí)flex-grow: n;就已經(jīng)失效了 - 情況二：內(nèi)容的長單詞沒有空格，可能在解析的時(shí)候當(dāng)做一個(gè)字符，所以內(nèi)容的長度就是整個(gè)字符的實(shí)際長度，同樣也導(dǎo)致了
flex-grow: n;的失效
- 情況一：由于
4. 解決方案
4.1 方案一
- 內(nèi)容盒設(shè)置
width: 0;，側(cè)邊欄正常，但是內(nèi)容盒的內(nèi)容會溢出，這種情況看怎么處理內(nèi)容部分 - 因?yàn)閭?cè)邊欄的寬度一般都是固定的，這種處理方案雖然會有一定的取舍，但是會比原先好一些
4.2 方案二
- 給內(nèi)容盒設(shè)置
overflow-y: auto;，這樣側(cè)邊欄正常，內(nèi)容盒會出現(xiàn)橫向滾動(dòng)條
到了這里，關(guān)于關(guān)于 flex 布局時(shí)，子元素寬度超出父元素問題及解決方案（問題）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
