FLEX弹性布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex layout</title>

    <style>
        #container{
            display: -webkit-box;
        }

        #second{
            /*设置可伸缩*/
            -webkit-box-flex: 1;
        }
        p{
            /*float: left;*/
            width:200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="container">
        <p id="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam autem deserunt dolore eligendi exercitationem minima porro quisquam temporibus, vero. Earum eveniet excepturi labore minima necessitatibus porro sed vel, voluptatem?</p>
        <p id="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab accusantium ad consequatur deleniti dolore earum et, expedita iste iure modi molestias officia omnis quae qui recusandae sit vel voluptas.</p>
        <p id="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae enim ipsam nisi officia tempora! Alias atque incidunt nobis, quod tempore unde. Assumenda culpa est in laborum quam repellendus vero vitae?</p>
    </div>
</body>
</html>

如下：当调整浏览器宽度是第二个区域进行了伸缩，
-webkit-box-flex: 1; 这个后面的数据是伸缩时的比例，如果只有一个元素设置了则只伸缩该区域，如果设置另外一个区域为2，则按照比例伸缩。

处理垂直空间：

#container{
            display: -webkit-box;
            /*设置反向排列*/
            -webkit-box-direction: reverse;
            /*内容底部*/
            -webkit-box-align: end;
        }

#container{
     display: -webkit-box;
     -webkit-box-direction: reverse;
     -webkit-box-align: end;
     /*start end center justify*/
     -webkit-box-pack: justify;
}
设置区域最大宽度，浏览器该如何分配多余的空间。