Flex child does not take width of it's own children and cuts off hover

Question

For some reason my complete understanding from CSS has been broken by the following snippet. My goal here is to show a hover over the whole .some-row-with-items element when I hover over it. For some reason unbeknownst to me, it cuts off the element right at the position of the scrollbar though and doesn't extend to cover all elements even though no explicit width is set. This is apparent by the red border added for visibility when you scroll horizontally.

Question here now is, how can I achieve a full hover over the full row?

* {
  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>

did you try setting width on .some-long-row-with-items to fit-content ? — mocni_T, Jun 14 '19 at 13:35
@mocni_T Setting a width would mean the row is no longer flexible and it would defeat the purpose. — Sargo Darya, Jun 14 '19 at 13:39
The problem is explained here: https://stackoverflow.com/q/45497031/3597276 — Michael Benjamin, Jun 14 '19 at 18:08

score 1 · Accepted Answer · answered Jun 14 '19 at 13:37

You can use an inline container by using 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>

Or you can use width: max-content on the flexbox container:

* {
  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>

score 1 · Answer 2 · answered Jun 14 '19 at 14:18

By default, flexbox takes up the width of its container, which in this case is 100% or 100vw. So when you apply hover effect on the .some-long-row-with-items, it causes background change over that amount of width.
flex: 0 0 50px style applied to .some-item makes the child elements take up the width of 50px, which would otherwise be auto. This is why the content inside the flexbox is overflowing out of it.
You can avoid this situation by:

setting width: max-content to the parent of the flexbox
setting width: max-content to flexbox
setting overflow: hidden to .some-long-row-with-items.

score 0 · Answer 3 · answered Jun 14 '19 at 13:35

0

I tried it and apparently if you just remove flex: 0 0 50px; from your class .some-item works perfect, if I understand what you mean.

answered Jun 14 '19 at 13:35

pitygacio

41
6

This apparently doesn't work as it will result in the items shrinking to fit. The items need to stay the same size. I tried setting `flex-shrink: 0` to see if it helps but the problem persists. – Sargo Darya Jun 14 '19 at 13:41
Removing `flex: 0 0 50px;` they just center themselves and the shrinking it's almost imperceptible, sad it didn't work well – pitygacio Jun 14 '19 at 13:47

Flex child does not take width of it's own children and cuts off hover

3 Answers3