彈性盒模型冷門知識

能夠出現居中的border，兩邊元素分別爲49.5px

<div style="display: flex;width: 100px">
        <div style="flex: 1; border-right:1px">a</div>
        <div style="flex: 1">b</div>
    </div>

彈性盒模型中的input標籤可能會出現默認寬度，而且不能夠用flex-basis覆蓋，只能設置width爲0

相似如下結構的dom

<div style="display: flex;flex-direction:column;height: 600px">
        <header style="height: 30px">有必定高度</header>
        <!-- 這個容器佔據下部剩餘空間 -->
        <div class=a style="flex: 1">
            <!-- 這個容器在左邊做爲目錄 -->
            <div class=b style="height: 100%;width: 300px;display: flex;flex-direction: column">
                <!-- 這個容器是一個搜索欄 -->
                <input type="text" style="height: 30px">
                <!-- 這裏理論上是剩餘空間，帶滾動條卻超出去了 -->
                <div class=c style="flex: 1;overflow:auto">
                    <div>123123 * 10000個</div>
                </div>
            </div>
        </div>
    </div>

此時的容器B的100%是無效的。abc的高度都是c的
解決方案

// 使用彈性盒模型的Y軸平鋪屬性（默認）來得到100%高度
        <div style="display: flex;flex-direction:column;height: 600px">
        <header style="height: 30px">有必定高度</header>
        <!-- 這個容器佔據下部剩餘空間 -->
        <div class=a style="flex: 1:display: flex">
            <!-- 這個容器在左邊做爲目錄 -->
            <div class=b style="height: 100%;width: 300px;display: flex;flex-direction: column">
                <!-- 這個容器是一個搜索欄 -->
                <input type="text" style="height: 30px">
                <!-- 這裏理論上是剩餘空間，帶滾動條卻超出去了 -->
                <div class=c style="flex: 1;overflow:auto">
                    <div>123123 * 10000個</div>
                </div>
            </div>
        </div>
    </div>
// 或者 設置a overflow:hidden; 這個方案的原理目前未知
      <div style="display: flex;flex-direction:column;height: 600px">
        <header style="height: 30px">有必定高度</header>
        <!-- 這個容器佔據下部剩餘空間 -->
        <div class=a style="flex: 1:display: flex;overflow: hidden">
            <!-- 這個容器在左邊做爲目錄 -->
            <div class=b style="height: 100%;width: 300px;display: flex;flex-direction: column">
                <!-- 這個容器是一個搜索欄 -->
                <input type="text" style="height: 30px">
                <!-- 這裏理論上是剩餘空間，帶滾動條卻超出去了 -->
                <div class=c style="flex: 1;overflow:auto">
                    <div>123123 * 10000個</div>
                </div>
            </div>
        </div>
    </div>