弹性项目和水平滚动的问题答案

【问题标题】：Problem with flex items and horizontal scrolling弹性项目和水平滚动的问题
【发布时间】：2019-03-19 02:24:26
【问题描述】：

我在弹性项目和水平滚动方面遇到了一个非常奇怪的行为。

如果您运行代码 sn-p 并向右滚动，则不再呈现红色边框。同样，在开发工具中悬停在 .myrow 上时，滚动前只会显示行的可见部分。

谁能解释这种奇怪的行为？（我用的是铬）

.mycontainer {
    overflow-x: auto;
    display: flex;
    flex-direction: column;
  }

  .myrow {
    height: 100px;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid red;
    background-color: blue;
  }

  .mycell {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    background-color: #fff;
    width: 300px;
    background: transparent;
    background-color: #f8f9fb;
  }

<div class="mycontainer">

  <div class="myrow">
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo</div>
    <div class="mycell">Hallo last</div>
  </div>
</div>

【问题讨论】：

因为在.mycontainer 类中您使用flex-direction: column 删除它并查看更改
好的，谢谢！但我需要这里的专栏。看这支笔并向右滚动。边框和背景颜色被忽略。你能解释一下为什么会这样吗？ codepen.io/mwager/pen/gEKNMN
您可以在父级中使用 flex 方向列，以防止其子级在滚动视图中展开（沿行方向）全宽

标签： html css scroll flexbox

【解决方案1】：

你的问题是因为你给overflow-x: auto的内容是块元素 - 只有内联元素扩展到实际的可滚动区域时间>。所以inline-flex 就像 column flexbox 一样有效。

使用包装器和 inline-flex

您还需要一个包装器（比如col 元素），它是您的列弹性框，而mycontainer 在这里只有oveflow-x 属性 - 请参见下面的演示：

.mycontainer {
  overflow-x: auto;
}
.col {
  display: inline-flex; /* an inline display is used here */
  flex-direction: column;
}
.myrow {
  display: flex;
  flex-direction: row;
  height: 48px;
  background-color: #e7eff5;
  border-bottom: 1px solid red;
}
.mycell {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  background-color: #fff;
  width: 300px;
  background: transparent;
  background-color: #f8f9fb;
}

<div class="mycontainer">
  <div class="col">
    <div class="myrow">
      <div class="mycell">Row1</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo last</div>
    </div>

    <div class="myrow">
      <div class="mycell">Row1</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo last</div>
    </div>
  </div>
</div>

使用包装器和最大内容宽度

您可以在不使用 inline-flex 的情况下完成这项工作，但在 col 围绕 myrow 的新包装器上添加 width: max-content - 请参见下面的演示：

.mycontainer {
  overflow-x: auto;
}
.col {
  display: flex;
  flex-direction: column;
  width: max-content; /* note this usage */
}
.myrow {
  display: flex;
  flex-direction: row;
  height: 48px;
  background-color: #e7eff5;
  border-bottom: 1px solid red;
}
.mycell {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  background-color: #fff;
  width: 300px;
  background: transparent;
  background-color: #f8f9fb;
}

<div class="mycontainer">
  <div class="col">
    <div class="myrow">
      <div class="mycell">Row1</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo last</div>
    </div>

    <div class="myrow">
      <div class="mycell">Row1</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo</div><div class="mycell">Hallo last</div>
    </div>
  </div>
</div>

【讨论】：

非常感谢您的详细解答！！