如下圖，是一種常見的頁面結構，我們可以有很多方法實現，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) }