All pictures aligned with overflow

Question

All pictures aligned with overflow

The first container is working fine, displaying 2 images vertically, but when there are 6 images, it overflows.

The problem lies with container 2, where I want to create a horizontal list of images with overflow (only horizontal).

This is the current state of my CSS:

#container {
  display: block;
  width: 80%;
  height: 40vw;
  background: red;
  margin-bottom: 50px;
}

#imglist {
  display: block;
  overflow: auto;
  height: 40vw;
  width: 40%;
}

#imglist div {
  display: block;
  width: 100%;
}

#imglist div img {
  width: 100%;
}

/* Problem */

#container2 {
  display: block;
  width: 80%;
  height: 20vw;
  background: red;
}

#imglist2 {
  overflow-x: scroll;
  display: block;
  width: 100%;
  height: 15vw;
}

#imglist2 div {
  width: 20%;
  display: inline;
}

Refer to this JSFiddle for an example: https://jsfiddle.net/n4a2tc7s/

css

Answer 1

Answer №1

Take Charge of Wrapping and Concealment

To have full control over wrapping and hiding content, it is recommended to specify white-space: nowrap for the container. Additionally, set overflow-y: hidden instead of overflow-x: scroll to prevent horizontal scrolling. This will ensure that scroll bars only appear on the vertical axis, as needed.

In the example below, I included height: 100% for #imglist2 to address an issue where the scrollbar was cutting off the images due to the 15vw declaration. If this was intentional, you can revert it back to its original state:

#container2 {
  display: block;
  width: 80%;
  height: 20vw;
  background: red;
  white-space: nowrap;
}

#imglist2 {
  overflow-y: hidden;
  display: block;
  width: 100%;
/*height: 15vw;*/
  height: 100%;
}

#imglist2 div {
  width: 20%;
  display: inline;
}

<section id="container2">
  <div id="imglist2">
    <div>
      <img src="http://img.youtube.com/vi/Je7VuV9yHIw/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/uxps_fYUeJk/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/Zvr3cwbbqHU/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/Ka9xtXPD3BA/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/U8HVQXkeU8U/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/e7_UUfokexM/1.jpg">
    </div>
  </div>
</section>

Answer 2

Take Charge of Wrapping and Concealment

To have full control over wrapping and hiding content, it is recommended to specify white-space: nowrap for the container. Additionally, set overflow-y: hidden instead of overflow-x: scroll to prevent horizontal scrolling. This will ensure that scroll bars only appear on the vertical axis, as needed.

In the example below, I included height: 100% for #imglist2 to address an issue where the scrollbar was cutting off the images due to the 15vw declaration. If this was intentional, you can revert it back to its original state:

#container2 {
  display: block;
  width: 80%;
  height: 20vw;
  background: red;
  white-space: nowrap;
}

#imglist2 {
  overflow-y: hidden;
  display: block;
  width: 100%;
/*height: 15vw;*/
  height: 100%;
}

#imglist2 div {
  width: 20%;
  display: inline;
}

<section id="container2">
  <div id="imglist2">
    <div>
      <img src="http://img.youtube.com/vi/Je7VuV9yHIw/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/uxps_fYUeJk/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/Zvr3cwbbqHU/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/Ka9xtXPD3BA/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/U8HVQXkeU8U/1.jpg">
    </div>
    <div>
      <img src="http://img.youtube.com/vi/e7_UUfokexM/1.jpg">
    </div>
  </div>
</section>

Answer 3

Answer №2

Take a look at this code snippet:

#block3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 25vh;
    background: blue;
    white-space: pre;
}

Answer 4

Take a look at this code snippet:

#block3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 25vh;
    background: blue;
    white-space: pre;
}

All pictures aligned with overflow

Answer №1

Take Charge of Wrapping and Concealment

Answer №2

Similar questions

BS grid malfunctioning in a non-uniform manner

Guide to incorporating flash into a form similar to the method used on http://www.mediafire.com

Issue with changing the height of a textarea in a mobile browser when it is

Having difficulty implementing a hover event on a sibling element of a target using either the duration parameter in jQuery UI or CSS

Display a floating label above the text input when it is focused or when it holds text

The left and right edges are not extending across the entire screen

What are some effective ways to analyze jQuery and JavaScript using web development tools?

Align the inline text at the center as if it were an inline-block element

Chrome has a tendency to cut off page contents in print preview, unlike other browsers that do not have this issue

Working with the collapse event in Bootstrap

Improve the readability of text that is overflowing using CSS styling techniques

The left side of my image doesn't quite reach the edges of the screen as desired

Encountering issues with loading styles in Vue single file components

Effortlessly alternate between dual-column and single-column layouts using CSS

Persistent vertical menu dropdown that remains expanded on sub menu pages

What is the best way to ensure a string of words in HTML/CSS wraps to the next line seamlessly?

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

Ways to secure a floating item onto a backdrop picture

Stop the default drag behavior on an input range element in VueJS

Suitable HTML container for ASP form over HTML table