Почему не вытягиваются аболютно позиционированные блоки во всю ширину документа?

Question

[lavezzi1]

Добрый вечер, коллеги!

У меня на сайте есть два блока с position absolute, внем есть списки статей и кнопка внизу, они выезжают при клике на кнопку поверх контента. Все сверстано на flexbox. Но есть баг, если контента много, при скроле эти два плавающих блока не растягиваются на весь документ, а занимаюь только высоту viewporta.

Демо codepen.io/anon/pen/ojrJpx

Заранее спасибо за помощь

Comments

[Дмитрий Кравченко]

stackoverflow.com/questions/27327471/flexbox-absol...

[lavezzi1]

Не понял, к сожалению, как это может помочь в моем случае.

Answer 1

[BohdanK]

В вашем случае нужно добавить position: relative; для тега body, потому что у вас позиционирование должно быть относительно body:
body {
display: flex;
min-height: 100vh;
background-color: pink;
position: relative;
}

Comments

[lavezzi1]

Спасибо, помогло. Но вылез новый баг, посмотрите пожалуйста Баг при проектировании сайта на flexbox, как решить?

Answer 2

[Ярослав Самардак]

Потому что absolute именно от viewport и зависит, как вариант можете сделать position: fixed или растянуть блок средствами JS

Answer 3

[Александр Мельниченко]

Блок с позиционирование absolute позоционируется относительно ближайшего родителя с позиционированием relative.
Оберни эту вся лабуду в блок с position:relative

<div style="position:relative">
<nav>
  <h5>Nav</h5>
  <button>Exit</button>
</nav>
<aside> 
  <h5>Sidebar</h5>
  <button>Exit</button>
</aside>
<main>...</main></div>

Comments

[lavezzi1]

Спасибо! Но обнаружился новый баг, посмотрите пожалуйста Баг при проектировании сайта на flexbox, как решить?

Answer 4

[Дмитрий Христоев]

зачем 2 раза вопрос задавать?

Comments

[lavezzi1]

Разные баги. Это первый баг был