Flex элемент центрируется со смещением при position: absolute или fixed

Question

Блок green выравнивается посередине при помощи Flеxbox. Всё бы хорошо, но почему-то он имеет смещение вниз, равное высоте блока line, хотят последний не располагается внутри Flеxbox'а и никак с ним не связан. Как убрать это нехорошее смещение?

#outer {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

#line {
  display: block;
  width: 100%;
  height: 50px;
  background-color: red;
}

#flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: white;
}

#green {
  display: block;
  width: 200px;
  height: 200px;
  background-color: green;
}

<div id="outer">
  <div id="line"></div>
  <div id="flex">
    <div id="green"></div>
  </div>
</div>

Answer 1

Проблема была в растягивании flex контейнера по высоте на 100%. Часть контейнера в данном случае выезжает за пределы видимой области, поскольку его выталкивает блок #line. И создаётся ощущение, будто #green смещён вниз. Как вариант, зная высоту блока #line, можно задать стиль для flex контейнера следующим образом:

height: calc(100% - 50px);

Тогда он перестанет выезжать за пределы видимой области. Возможно есть и другие варианты.

БЛОГ НА HUSL

Flex элемент центрируется со смещением при position: absolute или fixed

Ответы (1 шт):