flex: 1,你真的懂吗

#inner的高度是多少？为什么？ 详情请见：blog.csdn.net/Supposelll/…

  <div id="out">
        <div id="title">
            标题
        </div>
        <div id="inner">
            <div id="a">
                <div class="b">
                    1
                </div>
                <div class="b">
                    2
                </div>
                <div class="b">
                    3
                </div>
            </div>
        </div>
    </div>

        #out {
            background-color: red;
            height: 200px;
            display: flex;
            flex-direction: column;
        }

        #title {
            height: 100px;
            flex-shrink: 0;
        }

        #inner {
            background-color: purple;
            flex: 1;
        }

        #a {
            height: 100%;
            overflow: auto;

        }

        .b {
            height: 100px;
        }