SOURCE

<!-- <input class="input" placeholder="请输入" required>

<div class="box"></div>
<div class="box"><span></span></div>
<div class="box">123</div> -->

<!-- <div class="flex">
    <div class="head">head</div>
    <div class="main">
        <h1>main</h1>
        <h1>main</h1>
        <h1>main</h1>
        <h1>main</h1>
        <h1>main</h1>
        <h1>main</h1>
        <h1>main</h1>
        <h1>main</h1>
        <h1>main</h1>
        <h1>main</h1>
    </div>
    <div class="foot">foot</div>
</div> -->

<div class="scroll">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="a">
    <div class="b"></div>
</div>
<div class="c"></div>

/* .input:valid{
    border: 4px solid #ff0000;
}

.box{
    width: 20px;
    height: 20px;
    background: #000;
}
.box:empty{
    background: #ddd;
} */

/* .flex{
    height: 500px;
    width: 800px;
    display: flex;
    flex-direction: column;
}
.head,.foot{
    flex: 0 0 100px;
    background: #ff0000;
}
.main{
    flex: 1;
    height: 0;
    overflow: auto
} */

.scroll{
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow: auto;
}
.scroll .item{
    flex: 0 0 50px;
    height: 50px;
    margin: 20px;
    background: #ddd;
}

.a{
    width: 100px;
    height: 100px;
    background: #ddd;
    position: relative;
    overflow-y: auto;
    overflow-x: visible;
}
.b{
    width: 50px;
    height: 50px;
    background: #000;
    position: fixed;
    bottom: -25px;
    z-index: 11;
}
.c{
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
}