Flex child не принимает ширину своих собственных детей и отсекает зависание

Question

По какой-то причине мое полное понимание CSS было нарушено следующим фрагментом. Моя цель здесь - показать наведение на весь элемент .some-row-with-items, когда я наведу на него курсор. По некоторым незаметным для меня причинам, он обрезает элемент прямо в позиции полосы прокрутки и не распространяется на все элементы, даже если не задана явная ширина. Это видно по красной границе, добавленной для наглядности при горизонтальной прокрутке.

Вопрос теперь в том, как мне добиться полного наведения на полный ряд?

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.flex-main {
  display: flex;
  width: 100%;
  height: 100%;
  border: 2px solid blue;
}

.flex-main-content {
  flex: 1 1 100%;
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.some-long-row-with-items {
  display: flex;
  border: 1px solid red;
}

.some-long-row-with-items:hover {
  background: #eee;
}

.some-item {
  margin: 5px;
  width: 50px;
  height: 25px;
  border: 1px solid gray;
  flex: 0 0 50px;
}

<div class="flex-main">
  <div class="flex-main-content">
    <div class="nonflex">
      <div class="some-long-row-with-items">
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

Вы можете использовать встроенный контейнер , используя display: inline-flex:

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.flex-main {
  display: flex;
  width: 100%;
  height: 100%;
  border: 2px solid blue;
}

.flex-main-content {
  flex: 1 1 100%;
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.some-long-row-with-items {
  display: inline-flex; /* change here */
  border: 1px solid red;
}

.some-long-row-with-items:hover {
  background: #eee;
}

.some-item {
  margin: 5px;
  width: 50px;
  height: 25px;
  border: 1px solid gray;
  flex: 0 0 50px;
}

<div class="flex-main">
  <div class="flex-main-content">
    <div class="nonflex">
      <div class="some-long-row-with-items">
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
      </div>
    </div>
  </div>
</div>

Или вы можете использовать width: max-content в контейнере flexbox :

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.flex-main {
  display: flex;
  width: 100%;
  height: 100%;
  border: 2px solid blue;
}

.flex-main-content {
  flex: 1 1 100%;
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.some-long-row-with-items {
  display: flex; 
  border: 1px solid red;
  width: max-content; /* added */
}

.some-long-row-with-items:hover {
  background: #eee;
}

.some-item {
  margin: 5px;
  width: 50px;
  height: 25px;
  border: 1px solid gray;
  flex: 0 0 50px;
}

<div class="flex-main">
  <div class="flex-main-content">
    <div class="nonflex">
      <div class="some-long-row-with-items">
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
        <div class="some-item"></div>
      </div>
    </div>
  </div>
</div>

Answer 2

По умолчанию flexbox занимает ширину своего контейнера, которая в данном случае равна 100% или 100vw.Таким образом, когда вы применяете эффект наведения на .some-long-row-with-items, это вызывает изменение фона на эту величину ширины.Стиль flex: 0 0 50px, примененный к .some-item, заставляет дочерние элементы занимать ширину 50 пикселей, что в противном случае было бы автоматическим.Вот почему содержимое внутри flexbox переполняется.Вы можете избежать этой ситуации:

• , установив width: max-content для родительского элемента flexbox
• , установив width: max-content для flexbox
• , установив overflow: hidden в .some-long-row-with-items.

Answer 3

Я попробовал это и, очевидно, если вы просто удалите flex: 0 0 50px; из вашего класса .some-item работает отлично, если я понимаю, что вы имеете в виду.