Div contents not rendering when scrolling horizontally and adding background color-CodePudding

Why is it that the contents of my div are not rendered when I am scrolling horizontally?

When I shrink down my screen, the scrollbar appears correctly. But when I do scroll, the content that was outside of the view-port do not get rendered.

What I have figured out so far is that it has something to do with adding background color to the div. Whenever I remove the background color property, the problem is gone and the overflow works correctly.

How could I implement this to work correctly with the overflow and background color?

I want the scrollbar to only be on the main container, as this example is simplified. My actual code contains multiple 'item-containers' and I would like them to all scroll together.

.main-container {
  overflow: auto;
}

.items-container {
  display: flex;
  border-radius: 8px;
  padding: 10px;
  background-color: rgb(33, 37, 41);
  color: white;
}

.item {
  max-width: 250px;
  min-width: 250px;
  font-size: 20px;
  font-weight: bold;
}

<div >

  <div >
    <div >
      <label>Hello World 1</label>
    </div>
    <div >
      <label>Hello World 2</label>
    </div>
    <div >
      <label>Hello World 3</label>
    </div>
    <div >
      <label>Hello World 4</label>
    </div>
    <div >
      <label>Hello World 5</label>
    </div>
  </div>
</div>

CodePudding user response：

OK, The thing is the flex-items are not wrapping into new row; and items-container is blocking element to max width of the parent. As parent div(.main-container) has overflow auto this leads the child to render unexpectedly.

So there are 2 ways to fix this.

One is adding display: flex; to the .main-container div.

Another add css width: max-content; in .items-container class

.main-container {
  overflow: auto;
  /* display: flex; */ /*this works also*/ 
}

.items-container {
  display: flex;
  border-radius: 8px;
  padding: 10px;
  background-color: rgb(33, 37, 41);
  color: white;
  width: max-content;
}

.item {
  max-width: 250px;
  min-width: 250px;
  font-size: 20px;
  font-weight: bold;
}

<div >

  <div >
    <div >
      <label>Hello World 1</label>
    </div>
    <div >
      <label>Hello World 2</label>
    </div>
    <div >
      <label>Hello World 3</label>
    </div>
    <div >
      <label>Hello World 4</label>
    </div>
    <div >
      <label>Hello World 5</label>
    </div>
  </div>
</div>

CodePudding user response：

Changing display: flex to display: inline-flex in your .image-container will ensure the overflow is visible on scroll

.main-container {
    overflow: auto; 
}


.items-container {
    display: inline-flex; /*add this*/
    border-radius: 8px;
    padding: 10px;
    background-color: rgb(33, 37, 41);
    color: white;
}

.item {
    max-width: 250px;
    min-width: 250px;
    font-size: 20px;
    font-weight: bold;
}

<div >

    <div >
        <div >
            <label>Hello World 1</label>
        </div>
        <div >
            <label>Hello World 2</label>
        </div>
        <div >
            <label>Hello World 3</label>
        </div>
        <div >
            <label>Hello World 4</label>
        </div>
        <div >
            <label>Hello World 5</label>
        </div>
    </div>
</div>