如何确保背景填充溢出的整个弹性行？

Question

如何保证background-color填满整个向右溢出的flex行？目前，它只填充适合屏幕的一部分。

这是一个例子：

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>

Answer 1

将 background-color 从 .wrapper 移动到 main。

您的 main 元素是正在滚动的元素。

Answer 2

.wrapper内容溢出，但没有溢出您可以从 main 中删除 overflow-x:scroll，并在 .wrapper

中使用 overflow-x:auto

Answer 3

您可以将宽度设置为任意 .content（例如：width:30%），然后将 width: 180% 设置为 .wrapper。因为你在任何包装器中有 6 div 标签：

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>

Answer 4

您必须通过在包装器上设置 align-items:start 考虑 min-width:100% 来禁用拉伸对齐：

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>

如何确保背景填充溢出的整个弹性行？

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

css

flexbox