Full width of relative positioned overflowing flex container

Question

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?

Possible duplicate of [Cannot make DIV width 100% with scrollbar](https://stackoverflow.com/questions/33904792/cannot-make-div-width-100-with-scrollbar) — sergdenisov, Sep 03 '17 at 20:52
I think using Flex you cannot achieve this like @sergey Denisov. But you can make still make the same using inline-block — Marouen Mhiri, Sep 03 '17 at 21:26
Possible duplicate of: [Make child element use 100% of total OVERFLOW height of parent](https://stackoverflow.com/q/45497031/3597276) — Michael Benjamin, Sep 04 '17 at 02:12

Asons · Answer 1 · 2017-09-04T06:30:09.187

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>

Full width of relative positioned overflowing flex container

1 Answers1