制作 flex 的背景，直到 flex 结束

Question

所以，我需要 flexbox 的背景随着滚动继续超过屏幕宽度。我不能将overflow:auto归因于.elements或.line1/2，因为我想要屏幕底部的滚动条（因为它是一个复杂项目的简化版本）。

.line1{
    display: flex;
    flex-flow:row;
    background-color: red;
}
.line2{
    display: flex;
    flex-flow:row;
    background-color: blue;
}
.elements{
    display: flex;
    flex-flow:column;
    background-color: red;
}

<div class="elements">
  <div class="line1">
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
  </div>
  <div class="line2">
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
  </div>
</div>

Answer 1

设置.elements为inline-flex:

.elements {
  display: inline-flex;
  flex-flow: column;
  background-color: red;
}

.line1 {
  display: flex;
  flex-flow: row;
  background-color: red;
}

.line2 {
  display: flex;
  flex-flow: row;
  background-color: blue;
}

<div class="elements">
  <div class="line1">
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
  </div>
  <div class="line2">
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
    <h1>HiMyNameIsRickAstley</h1>
  </div>
</div>

制作 flex 的背景，直到 flex 结束

Make the background of a flex until the end of the flex

html

css

flexbox