html - flex 元素和水平滚动的问题

Question

我遇到了 flex 元素和水平滚动的非常奇怪的行为。

如果您运行代码片段并向右滚动，红色边框将不再呈现。此外，在开发工具中将鼠标悬停在 .myrow 上会在滚动前仅显示该行的可见部分。

谁能解释这种奇怪的行为？ (我用的是 Chrome )

.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>

Answer 1

你的问题是因为你给overflow-x: auto的内容是 block 元素 - 只有内联元素扩展到实际的可滚动区域。因此 inline-flex 作为 column flexbox 起作用。

---

使用包装器和 inline-flex

你在这里还需要一个包装器(比如 col 元素)，它是你的 column flexbox 而 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 包装器上添加 width: max-content myrow - 请参阅下面的演示:

.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>