Проблема с гибкими элементами и горизонтальной прокруткой - PullRequest
Новая
       23

Проблема с гибкими элементами и горизонтальной прокруткой

1 голос
/ 18 марта 2019

Я столкнулся с очень странным поведением с флекс-элементами и горизонтальной прокруткой.

Если вы запустите фрагмент кода и прокрутите вправо, красная граница больше не будет отображаться.При наведении указателя мыши на .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>

1 Ответ

1 голос
/ 18 марта 2019

Ваша проблема заключается в том, что содержимое, которое вы дали 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>
...