Фиксированная ширина div шире экрана

Question

Я пытаюсь исправить div с шириной 50vw. Однако, когда я исправляю div, 50vw действует так, как будто это 100vw.

В приведенном ниже примере, чтобы получить желаемый эффект, я должен сделать target 25vw вместо 50vw. 100vw шире экрана.

Вот jsfiddle . синий .target контейнер должен иметь половину ширины желтого контейнера.

<div class="main">
    .
    <div class="content"> 
        <div class="content-wrapper">
            <div class="target-containers">
                <div class="target">. </div>     
            </div>
        </div>
    </div>  
</div>

CSS

html, body {      
  margin: 0;
  width:100%;
  height: 100%;
}

body {
  background-color:gray;
}

.main {
  background-color: yellow;
  min-height:100vw;
  position:relative; 
  margin-left: 25%;
  margin-right:25%;
}

.content-wrappers {
    position:relative;
}

.target-containers {
    position:relative;
}

.target { 
    min-width:50%;
    width:50%;
    position:fixed;
    float:left;
    background-color:blue; 
}

Answer 1

Пожалуйста, прочитайте о позиция: фиксированная.

Позиционируется относительно начального содержащего блока, установленного в окне просмотра, за исключением случаев, когда один из его предков имеет преобразование, перспективу или для свойства фильтра установлено значение, отличное от none

---

Кто является исходным содержащим блоком? (РЕДАКТИРОВАТЬ, чтобы уточнить этот комментарий )

Пожалуйста, прочитайте о , идентифицирующем содержащий блок

Примечание: Содержащий блок, в котором root element () resides - это прямоугольник, называемый начальным содержащим блоком. Он имеет размеры области просмотра (для непрерывного носителя) или области страницы (для выгружаемого носителя).

Пожалуйста, прочитайте о позиция: липкая

Вставляемый блок позиционируется аналогично относительно позиционированному блоку, но смещение вычисляется со ссылкой на ближайшего предка с блоком прокрутки или в окне просмотра, если ни у одного из предков нет блока прокрутки.

Вы можете изменить значение позиции на липкое, как это

.main {
    background-color: yellow;
    max-height:100vh;  
    min-height: 100vh;
    margin-left: 25%;
    margin-right:25%;
    overflow-y: auto
 }

 .target{ 
    min-width:50%;
    width:50%;
    position:sticky;
    background-color:blue;
    top: 0;
 }

Пример Fiddle

Answer 2

Если вы сделаете элемент position:fixed, он вырвет его из потока документов.

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

https://jsfiddle.net/k460abmv/