Display multiple images in a row, but other div no full width-CodePudding

I would like to display multiple images in a row, and image made the browser scrollable, but the body or other section width 100% is shorter than my image container.

How to make my text section same width as image section?

.text {
  background: red;
  height: 100px;
}
.images {
  display: flex;
}

<body>
  <section >
    hi
  </section>
  <section >
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
  </section>
</body>

CodePudding user response：

For the issue of images scroll you can add overflow-x: auto; & for making text and images same width just use the same width size:

.text {
  background: red;
  height: 100px;
  width: 100px; // change to any width size you want
}
.images {
  display: flex;
  overflow-x: auto;
  width: 100px; // change to any width size you want
}

<body>
  <section >
    hi
  </section>
  <section >
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
    <img src="https://source.unsplash.com/user/c_v_r/100x100"/>
  </section>
</body>

CodePudding user response：

Just add width: fit-content; to body

body {
    width: fit-content;
    min-width: 100%;
}
.text {
    background: red;
    height: 100px;
}

.images {
    display: flex;
}

<section >
    hi
</section>
<section >
    <img src="https://source.unsplash.com/user/c_v_r/100x100" />
    <img src="https://source.unsplash.com/user/c_v_r/100x100" />
    <img src="https://source.unsplash.com/user/c_v_r/100x100" />
    <img src="https://source.unsplash.com/user/c_v_r/100x100" />
    <img src="https://source.unsplash.com/user/c_v_r/100x100" />
    <img src="https://source.unsplash.com/user/c_v_r/100x100" />
    <img src="https://source.unsplash.com/user/c_v_r/100x100" />
    <img src="https://source.unsplash.com/user/c_v_r/100x100" />
    <img src="https://source.unsplash.com/user/c_v_r/100x100" />
</section>

CodePudding user response：

You need to put the 100% of width to img, and you should do the same with section, for not making strange things:

 .text {
     background-color: red;
     height: 100px;
 }

 section {
     width: 100%;
     display: flex;
 }

 img {
     width: 100%;
 }