Child element 100% width of it's parent with overflow: scroll

Question

I'm searching for a solution to get the child element 100% width of it's parent.

The problem: The parent has overflow-x: scroll. Text will insert a scrollbar. Now I want a child to get (the new) width of it's container.

Requirements: Pure CSS solution; no further HTML markup; no fixed width.

width: 100% will set it only to the init state width of the container.

Here is a fiddle: https://jsfiddle.net/y166e3nb/

Answer 1

I know it was told NOT to use more HTML markup, but the chosen answer have some issues, for instance, if you extend the text of the parent, or if you change font-size attribute, the chosen solution will not work, since it's doing a calc with a static 330px!

So I decided to post what I think to be a better solution:

.parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  padding: 40px 20px;
}

.parent > .content-wrapper {
  display: inline-block;
  white-space: nowrap;
  min-width: 100%;
}

.parent > .content-wrapper > .child {
  background: springgreen;
  white-space: normal;
}

<div class="parent">
  <div class="content-wrapper">
     This is some very very very very very long text to extend .parent div horizontaly, in      order to see .child divs extending
    
    <div class="child">
      This .child div should extend horizontaly
    </div>
  </div>
</div>

Instead of putting the text directly into the div .parent, we can create another div involving the text (.content-wrapper in the above example).

Then we can use 'display: inline-block' in this new div, to make it respect its content width, not the parent's one!

...in other words...

By adding display: inline-block to .content-wrapper, it'll force this div to have the width of the largest horizontal content inside it, in our case, the text!

Now if we add our .child div inside our new .content-wrapper, the .child will automatically fill the entire width of the .content-wrapper, even without using 'width: 100%', because every div element have by default 'display: block', which makes them have the width of its parent.

We should also use 'min-width: 100%' in our .content-wrapper, just to prevent it to have a width smaller than .parent's one, in case of text width being smaller than .parent's width.

Answer 2

I wasn't sure if you wanted the child to be the width without scrolling or with scrolling, so I came up with both:

Without Scrolling:

.parent {
    background: skyblue;
    width: 350px;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 40px 20px;
}
.child {
    background: springgreen;
    width: calc(100% + 40px);
    padding: 0 0 0 20px;
    margin: 0 0 0 -20px;
}

<div class="parent">
    I'm a wide parent. My text-content will wrap my box.
    My child should get my new size as 100% width.
    <div class="child">
        I would go over the full width if I could.
    </div>
</div>

https://jsfiddle.net/y166e3nb/2/

With Scrolling:

.parent {
    background: skyblue;
    width: 350px;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 40px 20px;
}
.child {
    background: springgreen;
    width:calc(100% + 330px);
    padding: 0 0 0 20px;
    margin: 0 0 0 -20px;
}

<div class="parent">
    I'm a wide parent. My text-content will wrap my box.
    My child should get my new size as 100% width.
    <div class="child">
        I would go over the full width if I could.
    </div>
</div>

https://jsfiddle.net/y166e3nb/3/

The calc() statement in each needs to be 2x the value of the padding.