JSFiddle - React, Tailwind, and code Playground

by tiki zzz

HTML

<h3>7.用flex做垂直弹性布局</h3>
        <div class="page">
            <div class="flex-cont flex-ver">
                <div class="nav-box">
                    title
                </div>
                <div class=" flex-item cont-box">
                    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                </div>
                <div class="btn-box">
                   <button class="f-btn">btn</button> 
                </div>
            </div>
        </div>

CSS

h3{
    line-height: 36px;
    height: 36px;
    padding-left: 20px;
    background: #f2f2f2;
    margin:20px 0;
}
p{margin:0;padding:0}
.f-icon {
    display: block;
    width: 20px;
    height: 20px;
    background: #31BBEE;
    flex:none;
}
.flex-cont{
    /*定义为flexbox的"父元素"*/
    display: -webkit-box; 
    display: -webkit-flex;
    display: flex;
}
.flex-item{
    /*给"子元素"赋予自由伸缩的能力*/
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 0%;
}
/*垂直弹性布局*/
.page{
    height: 400px;
    width: 100%;
    border: 1px solid #ddd;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.page .flex-ver{
    /*指定主轴的伸缩流方向是纵向的*/
    -webkit-box-orient:vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

    .nav-box,.btn-box{
    height: 45px;
    text-align: center;
    line-height: 45px;
}
    .cont-box{
    height: auto;
    background: #ccc;
    width: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling : touch;
}