时间戳

首页 > 解决方案 > 弹性项目和水平滚动的问题

html - 弹性项目和水平滚动的问题

问题描述

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

如果您运行代码片段并向右滚动，则不再呈现红色边框。.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>

标签： htmlcssscrollflexbox

解决方案

您的问题是因为您给出的内容overflow-x: auto是块元素- 只有内联元素才会扩展到实际的可滚动区域。因此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>

推荐阅读