CODEWITHSUNDEEP
htmlcssflexboxoverflow
Coded Monkey
Coded Monkey

Reputation: 605

Full width of relative positioned overflowing flex container

I'm trying to achieve a line across a horizontal overflowing flex container by making an absolute positioned child element with left and right both set to 0, this also means the container has to have a relative position to contain the absolute positioned element. This is where the trouble starts.

Because the container has a relative position, the right value of the children is not at the edge of the scroll view, it stops where the the overflow starts.

CodePen example

HTML Code:

<div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
</div>

CSS Code:

body > div {
  display: flex;
  overflow-x: scroll;
  position: relative;
}

body > div::before {
  content: '';
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  height: 4px;
  width: 100%;
  background: #000;
}

div > div {
  align-items: stretch;
  position: relative;
  min-width: 900px;
  height: 300px;
}

Is it possible to extend the child to span the entire element, including overflow?

Upvotes: 0

Views: 1277

Answers (1)

Asons
Asons

Reputation: 87191

You can accomplish that by using inline-flex instead of flex

Updated codepen

Stack snippet

body > div {
  display: inline-flex;                /*  changed  */
  overflow-x: scroll;
  position: relative;
}

body > div::before {
  content: '';
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  height: 4px;
  width: 100%;
  background: #000;
}

div > div {
  align-items: stretch;
  position: relative;
  min-width: 900px;
  height: 300px;
}
<div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
</div>

Alternatively, you can add an outer wrapper having inline-block

body > div {
  display: inline-block;
}

body > div > div {
  display: flex;
  overflow-x: scroll;
  position: relative;
}

body > div > div::before {
  content: '';
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  height: 4px;
  width: 100%;
  background: #000;
}

body > div > div > div {
  align-items: stretch;
  position: relative;
  min-width: 900px;
  height: 300px;
}
<div>
  <div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
  </div>
</div>

Upvotes: 2

Related Questions