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!

Answer 2

Your problem is that the images in your banner are too wide to fit in most viewports, so they force the page to be wider.

There is no easy way to correct this purely with CSS without either causing the images to overlap each other or warping the images' aspect ratio.

This CSS will fix the horizontal scrolling, but it will squish the first and last images:

.dittomall-banner img {
  width: 33%;
}

To truly fix things so that your images can maintain their original aspect ratio and also not cause the page to be too wide, you should edit the images so that they are cropped tightly, then use a background-color on .dittomall-banner that's the same as the background color in the first and third images. Then, center the images within the banner.

Assuming you crop the images so they are all equally sized (e.g., 300px x 100px), your final HTML and CSS could look like this:

HTML:

<div class="dittomall-banner">
  <div class="banner-inner-wrapper">
    <img src="http://www.dittomall.com/theme/dittomall/img/banner1.png" alt="banner1">
    <img src="http://www.dittomall.com/theme/dittomall/img/banner2.png" alt="banner2">
    <img src="http://www.dittomall.com/theme/dittomall/img/banner3.png" alt="banner3">
  </div>
</div>

CSS:

.dittomall-banner {
  display: flex;
  background-color: #ed8c7b;
}
.banner-inner-wrapper {
  margin: 0 auto;
}