如下圖，是一種常見的頁面結構，我們可以有很多方法實現，inline-block，float，flex等等

但是，最近專案中遇到一個怪事，左邊是側邊欄導航，右邊是一個數據展示table，el-table的橫向滾動條死活不出來。

我是採用flex佈局，這裡簡單貼一下css原始碼 ： （page 頁面根容器 sidebar 左側導航，main-content 右側主體內容區）

.page { display: flex; }
.sidebar { width: 150px; margin-right: 20px }
.main-content { flex: 1; }     flex: 1 // 主體內容會自動佔滿父元素減去sidebar(含外邊距)之後剩餘的寬度
 

對比了其它佈局，很快就鎖定了原因，只有flex佈局下並且自適應了寬度才會出現這種問題。接下來想辦法解決。 

嘗試一：

             直接給el-table設定一個固定寬度，比如1000px，滾動條正常，但這肯定不是我想要的，畢竟這種佈局多半是要相容多種螢幕解析度，所以放棄。

             而且，說不定後期又增加欄位，這是常有的事，不可能每次都改寬度，太low。

嘗試二：

在網上找了一個方法，說是通過定位，父元素relative，子元素absolute，試了一下，貌似可行，但是，畢竟是脫離文件流，會影響其後面元素的佈局，

             再者，寬度高度都要設定，不能適應多屏，果斷棄用。

終極解決方案： 

             flex佈局不變，flex: 1換成css3提供的動態計算屬性 calc，程式碼如下：

.page { display: flex; }
.sidebar { width: 150px; margin-right: 20px }
.main-content { width: calc(100% - 150px) }