分割線之前，是半年多前隨手記的，很亂。分割線後，是如今的歸納整理。

言簡意賅，長話短說。

需要的效果：element-ui的table元件在垂直和水平方向能適應不同大小的顯示區域，超出區域部分可實現滾動。進而強化對於控制元件自適應方面的理解。注：此處的顯示區域不等於螢幕，顯示區域大小=k * (螢幕解析度+遊覽器視窗)

應用場景：將一塊flex橫向佈局下的子區域劃再分成兩個部分，垂直排列，上半部分固定高度，下半部分自動獲取剩餘顯示空間。table元件位於下半部分。

解決方案：1，仍舊使用flex佈局，將主軸方向設為垂直起點在上；2，table元件的高度採用由外部樣式控制，寬度設定成所在區域的寬度。

測試結果：變更遊覽器視窗大小顯示比例不失真，超出顯示區域部分，無論垂直還是水平都可滾動。

過程：

1，關於flex佈局：1）flex下的子控制元件在主軸方向上的尺寸是無效的。如：橫向排列，子控制元件的width屬性無效，子控制元件的尺寸受flex屬性影響。2）子控制元件在主軸方向上的尺寸可以被子子控制元件撐大。比如：橫向排列，子控制元件下的子子控制元件的width超出了子控制元件，則子控制元件會被撐大；3）非主軸方向上的尺寸不會被子子控制元件撐大。比如：橫向排列，子子控制元件的height超出子控制元件，子控制元件不會被撐大。4）flex下子控制元件為了自適應顯示區域，把width和height設定100%時，在子控制元件的外層包一層absolute，否則設定的100%會很離奇。100%的參照是很有意思的。以flex橫向排列時的width為例，我目前的理解是：子控制元件的width

2，table元件自適應：1）根據element-ui的文件table元件可設定高度也可受控於外部樣式。設定高度時，所設高度覆蓋外部樣式，但如果table處於flex佈局下，根據上述“關於flex佈局”第1）點，

總結：緊抓3個知識點--1，flex佈局；2，屬性100%的繼承；3，element-ui的table元件使用。

最後，CSS佈局這塊的內容需要系統學習，目前的理解很多時基於例項驗證後自己推斷。

-------------------------------------------------人造分割線----------------------------------------------------

Appended at 20180811:

上文有太多的錯漏和無關的資訊

現簡化下：

目的：實現element-ui的table根據顯示區域大小的自適應。

1，table要適配顯示區域大小的變化，必須依賴滾動。(其實任何實際內容超出顯示區域的情況都需要滾動)
2，table的橫向縱向滾動都需要一個基本的前提條件--讓table知道顯示區域的大小。(這沒啥好說的)
3，所以，我們可以用彈性佈局，動態的改變table的顯示區域大小。
4，如何讓table準確知道當前顯示區域的動態實時大小，就只有靠100%。 

5，如何保證100%繼承的準確性，那就一定要明白，你定義的每一塊區域的100%繼承的是誰的。

其實，最容易出問題的地方，就是巢狀來巢狀去，自己都沒弄清楚100%屬性繼承的是誰的。

比如：

.A
    display: flex
    .A-1
        flex: 0 0 200px
    .A-2
        flex: 1
        .A-2-1
            width: 100%

以上寫法很坑爹。width: 100%繼承的who？

.A
    display: flex
    .A-1
        flex: 0 0 200px
    .A-2
        flex: 1
        position: relative
        .A-2-1
            position: absolute
            width: 100%

這樣寫，就清清楚楚。A-2-1的width: 100%是繼承自A-2的。A-2的position和A-2-1的position一個都不能少。

為什麼A-2還要定義position，不寫的話A-2-1繼承就亂了。

總結下(區域A橫向flex)：

1，A-1&A-2的width屬性此處是無效，但是A-2-1的width屬性是有效的；

2，如果A-2-1不設定position: absolute的話，A-2可以被A-2-1的width撐大；(感覺父控制元件很多時候受子控制元件影響，子控制元件position: absolute可以徹底免除對父控制元件的影響？)

3，為什麼A-2-1要定義width: 100%。因為，flex彈性的是A-2，不是A-2-1。如果不定義width: 100%的話，A-2會隨A大小變化，但A-2-1不會，那就何來實現自適應一說。

4，所以，如果你的table在A-2的位置，那table的width會因為flex自適應，且設定width也不會有效。但是，如果table是巢狀在A-2-1中，那必須設定width: 100%，且繼承自A-2，才能實現width自適應。

5，說回element-ui，table的高度必須設定，否則無法滾動。即便你使用了縱向flex佈局，你也要設定table的高度。估計table的height屬性同時也是縱向滾動的開關。你甚至可以這樣設定：

height="數值無關緊要，但必須要設定"(我就是這麼寫的)

6，說回element-ui，table的寬度，貌似是繼承自父元素，只有width低於：100%才有效。就是，你要麼把table的width弄小點，要麼就讓它自己繼承去。

最最後：巢狀的層級一定要清晰，繼承一定要明確。

PS：CSS這塊內容還是很生疏，後續需要花精力去了解其最底層的佈局策略。