1. 第一次遇到這個(gè)問題的場(chǎng)景

先看效果圖，大家可以看一下下面的樣式，很明顯左邊和右邊的盒子我是給的定寬，但是被擠壓了
這個(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

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

4. 解決方案

4.1 方案一

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

4.2 方案二

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

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

最新評(píng)論