制作flex的背景直到flex结束[重复]答案

【问题标题】：Make the background of a flex until the end of the flex [duplicate]制作flex的背景直到flex结束[重复]
【发布时间】：2022-02-08 02:40:22
【问题描述】：

所以，我需要 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>

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：

非常感谢！