flex布局的滚动问题

<div class="box-1">
    <div class="box-left"></div>
    <div class="box-right">
         <div class="right-inner-head">
             <div class="head-inner-1"></div>
             <div class="head-inner-2"></div>
         </div>
    </div>
</div>

    .box-1 {
        width: 500px;
        height: 300px;
        border: 3px solid red;
        display: flex;
        column-gap: 10px;
        overflow: hidden; // 父级添加
        .box-left {
            min-width: 100px;
            height: 100%;
            background: cyan;
        }
        .box-right {
            flex: 1;
            border: 1px solid gold;
            display: flex;
            overflow: hidden; // 父级添加
            .right-inner-head {
                width: 100%;
                height: 50px;
                border: 1px solid green;
                overflow: auto; // 父级添加
                .head-inner-1 {
                    width: 800px;
                    height: 100%;
                    border: 4px solid pink;
                }
            }
        }
    }

若flex布局想要某一区域横向滚动，父级一定要加上overflow，hidden或auto都可以。

若父级没加overflow，可能会出现溢出的问题：

    .box-1 {
        width: 500px;
        height: 300px;
        border: 3px solid red;
        display: flex;
        column-gap: 10px;
        .box-left {
            min-width: 100px;
            height: 100%;
            background: cyan;
        }
        .box-right {
            flex: 1;
            border: 1px solid gold;
            display: flex; // 父级没有加overflow
            .right-inner-head {
                width: 100%;
                height: 50px;
                border: 1px solid green;
                overflow: auto;
                .head-inner-1 {
                    width: 800px;
                    height: 100%;
                    border: 4px solid pink;
                }
            }
        }
    }