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

Issue

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?

enter image description here

.text {
  background: red;
  height: 100px;
}
.images {
  display: flex;
}
<body>
  <section class="text">
    hi
  </section>
  <section class="images">
    <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>

Solution

Just add width: fit-content; to body

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

.images {
    display: flex;
}
<section class="text">
    hi
</section>
<section class="images">
    <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>

Answered By – Nitheesh

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.