Почему height берётся от страницы, а не от родителя?

Question

[Алексей Гутник]

<style>
body {
  width: 100%;
  height: 100%;
}
.a {
  display: flex; 
  flex-direction: row;
  width: 100%;
}
.b {
  flex: 1;
  background: yellow;
}
.c {
  flex: 2;
  background: blue;
}
.d {
  background: red;
  width: 100%;
  height: 100%;
}
</style>
<div class="a">
  <div class="b">
    <div class="d">
    </div>
  </div>
  <div class="c">
      321
      321<br>
      321<br>
  </div>
</div>

Проблема в том, что при height: 100%; высота берётся от страницы а не от родителя.
И чего я не понимаю: если использовать всякие онлайн-редакторы, там всё работает как надо (там через iframe), но если просто открыть html-файл с кодом, то блок отображается на весь экран.

spoiler

Comments

[snap44]

У меня все как положено работает. Попробуйте в другом браузере открыть.

[Алексей Гутник]

snap44, хм.. Да, действительно. Хром не правильно обрабатывает. Только вот он у меня самый новый. Баг получается?

[snap44]

Алексей Гутник, попробуйте ctrl+f5

[Алексей Гутник]

snap44, Это не помогло. Обычная перезагрузка

spoiler

Тут такая же проблема

[snap44]

Алексей Гутник, тогда попробуйте стили в отдельный файл вынести =)

[Алексей Гутник]

snap44, На втором скриншоте уже вынесены. И нет, не помогло, всё так-же.

[Сергей delphinpro]

Просто добавьте правило

html {
  height: 100%;
}

Answer 1

[FalseCode]

Выложите весь свой код HTML