Fixed width element taking its fluid parents size?

Question

I have a fixed div inside a % width container.

HTML:

<div class="master-container">
    <div class="container">
        <div class="fixed">
        </div>
    </div>
</div>

CSS:

.master-container {
    max-width: 1200px;
    margin: 0 auto;
}
.container {
    width: 30%;
}

.fixed {
    position: fixed;
}

I've looked at a few other SO posts:

Set width of a "Position: fixed" div relative to parent div

Set width of fixed positioned div relative to his parent having max-width

With the general answer being to set width: inherit on the fixed element. The issue is it still inherits the width from the body rather than its percentage (unless I set a fixed width on the parent).

So, how can I get a fixed div to size to its immediate parent when the parent's width is set to a percentage.

I am seeking CSS solutions only - is it possible or will I have to JS it?

Edit

Most solutions so far inherit the width of the page where I need to get the fixed div to take 30% of the mastered centered container that center's the web page, it has a max width of 1200px.

Answer 1

You can achieve this using width: inherit;

.container {
    width: 30%;
    background: #444;
    height: 50px;
}

.fixed {
    width: inherit;
    height: 40px;
    position: fixed;
    background: #ccc;
}

<div class="container">
    <div class="fixed">
    </div>
</div>

You can also check Fiddle

Answer 2

This "works" fine if your parent div is the same width as the body. Of course, it is only working in appearance, not reality. This div takes 30% of the browser's width, like its parent div.

html, body {
    margin: 0;
}

.container {
    width: 30%;
    height: 400px;
    background: linear-gradient(green, white)
}

.fixed {
    position: fixed;
    background: red;
    width: inherit;
    height: 10px;
}

<div class="container">
    <div class="fixed"></div>
</div>

Otherwise, to accomplish this in CSS, you have a couple options, depending on your structure.

We know based on your question that the direct parent of the fixed div has a percentage width (we'll use 30%). That .container div must have one or more parent divs that have:

1. A fixed width in pixels
2. A width in percentage
3. A width in vw, em, etc.

This will (probably) be calculated in CSS. Otherwise, I don't know why you would want a CSS-only solution.

So if you have a parent of the container div with a width of 500px, you can make your fixed div the same width as the .container by giving it 30% of 500px:

html, body {
    margin: 0;
}

.parent {
    width: 500px;
    height: 400px;
    background: linear-gradient(blue, white)
}

.container {
    width: 30%;
    height: 400px;
    background: linear-gradient(green, white)
}

.fixed {
    position: fixed;
    background: red;
    width: calc(500px * .3);
    height: 10px;
}

<div class="parent">
    <div class="container">
        <div class="fixed"></div>
    </div>
</div>

This would also work if the .parent div has a width in % or vw, or anything else:

html, body {
    margin: 0;
}

.parent {
    width: 50%;
    height: 400px;
    background: linear-gradient(blue, white)
}

.container {
    width: 30%;
    height: 400px;
    background: linear-gradient(green, white)
}

.fixed {
    position: fixed;
    background: red;
    width: calc(50% * .3);
    height: 10px;
}

<div class="parent">
    <div class="container">
        <div class="fixed"></div>
    </div>
</div>

Obviously, you will have to know the widths of all the parents up to either the body or the nearest div with a fixed width and do the math in the CSS calc to adjust. But again, assuming no JS and that all parent div widths are defined in CSS, this could be done.

Edit: based on your updated question:

html, body {
    margin: 0;
}

.master-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(blue, white)
}

.container {
    width: 30%;
    height: 400px;
    background: linear-gradient(green, white)
}

.fixed {
    position: fixed;
    background: red;
    width: calc(1200px * .3);
    height: 10px;
}

@media (max-width: 1200px) {
    .fixed {
        width: 30%;
    }
}

<div class="master-container">
    <div class="container">
        <div class="fixed"></div>
    </div>
</div>

Answer 3

You can't do this with percentage-based widths. As soon as you make an element fixed, its size and position attributes become relative to the viewport, not the parent element. It effectively 'breaks out' of its parent and becomes a new stacking context so even though the CSS properties can still be inherited, it's calculated completely differently.

Your only option is to use a fixed width in pixels and use JS to sync the two if necessary.

Answer 4

You have to set width in pixels to the .container or add width to .container parent.

.container {
    width: 100px;
}

or

<div class="containerparent">
<div class="container">
    <div class="fixed"> </div>
</div>
</div>

and

  .container-parent {
        width: 100px;
    }

    .container {
        width: 30%;
    }