display flex 和 width 100% 的元素导致元素水平移动答案

【问题标题】：element with display flex and width 100% caused element move horizontallydisplay flex 和 width 100% 的元素导致元素水平移动
【发布时间】：2021-12-14 03:52:23
【问题描述】：

我试图了解主要原因是什么以及如何解决我的问题。我有一个固定宽度的元素和 2 个 100% 的子元素。在最里面的元素显示下设置为flex。然后我可以水平移动元素。无论如何我可以通过修改类section和panel来解决这个问题？我想在显示或不显示滚动条的面板下将边距保持为 5px codepen.io

.section{
  overflow-x: auto;
  overflow-y: scroll;
  width : 100%;
  border: 2px solid blue;
  
}

.panel{
  width: 100%;
  margin: 5px;
  display:flex; 
}
  
.App {
  width: 570px;
  padding: 5px;
  border: 2px solid red;
}

<body>
  <div class='App'>
    <div class='section'>
      <div class='panel'>
          <span> label </span>
          <input />
          <span> label </span>
          <input />
          <span> label </span>
          <input />
          <span> label </span>
          <input />
          <p>real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
          <p>real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
          <p>real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
          <p>
            real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
          <p>
            real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

您的问题不清楚。您想在这里实现什么目标？
我希望panel 中的上下文不会水平移动
@jacobcan118 你希望面板上的所有元素都在 1 行中并且没有水平滚动？

标签： javascript css flexbox

【解决方案1】：

我现在不知道你想要什么，但也许这可以帮助你。使用 css "grid" 来处理你的问题。

.section{
  overflow-x: auto;
  overflow-y: scroll;
  width : 100%;
  border: 2px solid blue;
  
}

.panel{
  width: 100%;
  margin: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
  
.App {
  width: 570px;
  padding: 5px;
  border: 2px solid red;
}

<body>
  <div class='App'>
    <div class='section'>
      <div class='panel'>
          <div>
              <span> label </span>
              <input />
          </div>
          <div>
              <span> label </span>
              <input />
          </div>
          <div>
              <span> label </span>
              <input />
          </div>
          <div>
              <span> label </span>
              <input />
          </div>
          <div>
              <span> label </span>
              <input />
          </div>
       </div/>
       <div class="panel">
          <p>real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
          <p>real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
          <p>real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
          <p>
            real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
          <p>
            real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
      </div>
    </div>
  </div>
</body>

【讨论】：