弹性项目和水平滚动问题

时间：2019-03-18 16:42:42

标签： html css css3 scroll flexbox

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

如果运行代码段并向右滚动，则不再显示红色边框。同样，在开发工具中将鼠标悬停在.myrow上时，在滚动之前仅显示该行的 visible 部分。

有人可以解释这种奇怪的行为吗？ （我用的是铬）

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

1 个答案:

答案 0 :(得分：1)

您的 issue 是因为您在其中获得overflow-x: auto的内容是 block元素-仅内联元素扩展到实际的可滚动区域。因此inline-flex在列flexbox 中起作用。

使用包装器和inline-flex

您将需要在这里另外一个包装器（例如col元素），这是您的列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的情况下进行这项工作，而在width: max-content周围的新col包装器上添加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>

相关问题
最新问题