Flexbox makes horizontal scrolling

Question

I\'m making a shopping mall site with flexbox layout, but flexbox causes problems in certain areas.

Flexbox seems to make horizontal scrolling in certain areas, but I do

Answer 1

Try this if you want your banner size to change according to your screen size. Please replace your CSS with the below code:

    html,body {
        margin:0;
        padding:0;
    }
    body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100 vh;
        align-items:center;
        overflow:hidden;
    }
    header {
        flex: 1 100 %;
    }
    .dittomall-banner {
        display: flex;
        flex: 1 100%;
    }
    img {
        width:100%;
    }

Hope this will help!