How to make sure background fills the whole flex row which overflows?-CodePudding

How to make sure that background-color fills the whole flex row which overflows to the right? Currently, it only fills a portion of it that fits on the screen.

Here's an example:

main {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: white;
  overflow-x: scroll;
}

.wrapper {
  display: flex;
  flex-direction: row;
}
.wrapper:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.content {
  min-width: 150px;
  min-height: 20px;
  padding: 20px;
}

<main>
  <div class='wrapper'>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
  </div>
  <div class='wrapper'>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
  </div>
</main>

CodePudding user response：

You have to disable the stretch alignment by setting align-items:start the consider min-width:100% on the wrapper:

main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items:start; /* added */
  background-color: white;
  overflow-x: scroll;
}

.wrapper {
  min-width:100%; /* added */
  display: flex;
  flex-direction: row;
}
.wrapper:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.content {
  min-width: 150px;
  min-height: 20px;
  padding: 20px;
}

<main>
  <div class='wrapper'>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
  </div>
  <div class='wrapper'>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
  </div>
</main>

CodePudding user response：

The .wrapper content is overflowing, but it does not overflow You could remove the overflow-x:scroll from main, and use overflow-x:auto in the .wrapper

CodePudding user response：

You can set a width to any .content(e.g: width:30%) then set width: 180% to .wrapper. since you have 6 div tag in the any wrapper:

main {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: white;
  overflow-x: scroll;
  }

.wrapper {
  display: flex;
  flex-direction: row;
  width: 180%;
  border: 1px solid red;

}
.wrapper:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.content {
  width: 30%;
  min-height: 20px;
  padding: 20px;
}

<main>
  <div class='wrapper'>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
  </div>
  <div class='wrapper'>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
    <div class='content'>Content</div>
  </div>
</main>

CodePudding user response：

Move background-color from .wrapper to main.

Your main element is what is being scrolled.

CodePudding user response：

Add to your .wrapper class:

display: inline-flex;

insted of:

display: flex;