1. 第一次遇到這個問題的場景

先看效果圖，大家可以看一下下面的樣式，很明顯左邊和右邊的盒子我是給的定寬，但是被擠壓了
這個是我在項目中遇到的一個bug，使用的 flex 布局，由于我動態(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

<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è)置了 flex: n 1 0; 對應(yīng)的 flex-grow: n; flex-shrink: 1; flex-basis: 0;，這里我們只探究 flex-grow: n;
• flex-grow：規(guī)定了項在 flex 容器中分配剩余空間的相對比例，這里的剩余空間指的是除內(nèi)容之外的空間
• 而上面兩種情況：
  • 情況一：由于 flex-grow 只能使當(dāng)前元素生效，而子元素的寬度也就是當(dāng)前元素的內(nèi)容，在 el-table 中第一次讀取寬度后，會給子元素設(shè)置固定寬度，進而導(dǎo)致沒有剩余空間，也就是當(dāng)內(nèi)容空間大于剩余空間時 flex-grow: n; 就已經(jīng)失效了
  • 情況二：內(nèi)容的長單詞沒有空格，可能在解析的時候當(dāng)做一個字符，所以內(nèi)容的長度就是整個字符的實際長度，同樣也導(dǎo)致了 flex-grow: n; 的失效

4. 解決方案

4.1 方案一

• 內(nèi)容盒設(shè)置 width: 0;，側(cè)邊欄正常，但是內(nèi)容盒的內(nèi)容會溢出，這種情況看怎么處理內(nèi)容部分
• 因為側(cè)邊欄的寬度一般都是固定的，這種處理方案雖然會有一定的取舍，但是會比原先好一些

4.2 方案二

• 給內(nèi)容盒設(shè)置 overflow-y: auto; ，這樣側(cè)邊欄正常，內(nèi)容盒會出現(xiàn)橫向滾動條

到此這篇關(guān)于flex布局子元素寬度超出父元素問題及解決方案的文章就介紹到這了,更多相關(guān)flex布局子元素寬度超出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！ 

最新評論