如何在flexbox中创建嵌套的可滚​​动容器？

Question

我有一个flexbox，里面嵌套了几个divs。在更深层次上是主要内容（黄色）。我想让它可以水平滚动，但只有divs和.flexbox之间的.content不存在时才有效。因此，如果div存在，overflow-x: scroll上.content的行为并不像我期望的那样。

任何人都可以解释一下吗？在flexbox中创建嵌套可滚动容器的可能解决方案是什么？

.flexbox {
 display: flex;
}

.content {
  background-color: yellow;
  height: 50px;
  color: black;
  overflow-x: scroll; 
  white-space: nowrap;
}

p {
  display: inline-block;
}

<div class="flexbox">
 <div> <!-- multiple nested divs like this one -->
   <div class="content"> <!-- finally content -->
      <p> I want to be able to scroll in here. </p>
      <p> Not in the whole page </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
   </div>
 </div>
</div>

Answer 1

问题是您的内部<div>元素超出了屏幕的宽度。我建议在Flexbox正下方的所有max-width: 100%元素上设置<div>，以便它们不会逃脱边界。这仍然允许您保留display: flex父母。

＆＃13;

＆＃13;

.flexbox {
 display: flex;
}

.content {
  background-color: yellow;
  height: 50px;
  color: black;
  overflow-x: scroll; 
  white-space: nowrap;
}

p {
  display: inline-block;
}

.flexbox > div {
  max-width: 100%;
}

＆＃13;

<div class="flexbox">
 <div> <!-- multiple nested divs like this one -->
   <div class="content"> <!-- finally content -->
      <p> I want to be able to scroll in here. </p>
      <p> Not in the whole page </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
   </div>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）

Answer 2

https://www.w3.org/TR/css-flexbox/#flex-common

  

默认情况下，弹性项目不会缩小到最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置min-width或min-height属性。

您可以在min-width: 0上使用max-width: 100%或.flexbox > div。

＆＃13;

＆＃13;

.flexbox {
 display: flex;
}

.flexbox > div {
  min-width: 0;
}

.content {
  background-color: yellow;
  height: 50px;
  color: black;
  overflow-x: scroll; 
  white-space: nowrap;
}

p {
  display: inline-block;
}

＆＃13;

<div class="flexbox">
 <div> <!-- multiple nested divs like this one -->
   <div class="content"> <!-- finally content -->
      <p> I want to be able to scroll in here. </p>
      <p> Not in the whole page </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
   </div>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

.flexbox {
 display: flex;
}

.flexbox > div {
  max-width: 100%;
}

.content {
  background-color: yellow;
  height: 50px;
  color: black;
  overflow-x: scroll; 
  white-space: nowrap;
}

p {
  display: inline-block;
}

＆＃13;

<div class="flexbox">
 <div> <!-- multiple nested divs like this one -->
   <div class="content"> <!-- finally content -->
      <p> I want to be able to scroll in here. </p>
      <p> Not in the whole page </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
   </div>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;