Установите ширину фиксированного положения div относительно его родителя, имеющего максимальную ширину

Question

Есть ли какое-либо решение без JS?

HTML

<div class="wrapper"> 
    <div class="fix"></div> 
</div> 

CSS

.wrapper { 
max-width: 500px; 
border: 1px solid red; 
height: 5500px; 
position: relative; 
} 


.fix { 
width: inherit; 
height: 20px; 
position:fixed; 
background: black; 
} 

Я не могу добавить любые другие стили для .wrapper кроме width: 100%;. Я пытаюсь использовать width: inherit, но это не работает для меня из-за того, что у меня есть родительский div с максимальной шириной. source

Вот JsFiddle Demo

Answer 1

position:fixed элемент не является относительно его родителя больше. Он уважает только наблюдатели в видовом экране.

MDN Definition:

фиксированной
Не оставляйте пространство для элемента. Вместо этого расположите его в указанной позиции относительно экрана просмотра экрана и не перемещайте его при прокрутке.

Таким образом, любой width, max-width, или любой другой собственности не будет уважаться неподвижным элементом.

EDIT

На самом деле, это не будет наследовать width, потому что нет width свойства, определенного на обертке .. Так что, попробуйте установить ребенок как width: 100% и наследует max-width:

http://jsfiddle.net/mx6anLuu/2/

.wrapper { 
    max-width: 500px; 
    border: 1px solid red; 
    height: 5500px; 
    position: relative; 
} 


.fix { 
    max-width: inherit; 
    width: 100%; 
    height: 20px; 
    position:fixed; 
    background: black; 
} 

Answer 2

В столбце уже есть ширина, просто установите ширину фиксированного элемента для наследования. нет причин усложнять ситуацию.

CSS:

.col-sm-3 { width: 25%; } 
.fixed-in-col { width: inherit; ... } 

HTML:

<div class="col-sm-3"> 
    <div class="fixed-in-div"> 
     ... 
    </div> 
</div> 

Answer 3

Кажется, нет никакого решения без JS. Это сообщение в блоге Фелипе Тадео объясняет, почему:

https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied

Это объясняет путаницу вокруг width: inherit

«Основные позиции сам по себе относительно окна просмотра ... всякий раз, когда вы унаследовали ширину (с фиксированной позиции) его будет относиться к видовому окну «