Почему width:100% ведет себя по разному в зависимости от flex-direction?

Question

[sirinotapple]

Здравствуйте, делая nav-bar
заметил что когда в

<div class="header">
    <div class="wrapper">
      <div class="logo"></div>
    </div>
  </div>

.header {
  height: 50px;
  width: 100vw;

  display: flex;
  flex-direction: row;
}
.wrapper {
  height: 100%;
}

.logo {
  height: 100%;
  aspect-ratio: 1;
  background: rgba(255, 0, 0, 0.247);
}

https://jsfiddle.net/unknowne/8scezjLu/10/#save
стоит flex-direction: row; то у wrapper width как и у дочернего logo
а когда flex-direction:column; то у wrapper width на весь екран,
Почему это происходит
Как сделать width равный вложенному элементу (как у flex-direction:row) но при flex-direction:column

Comments

[Ankhena]

Так обведите блоки рамочками и всё прояснится.

Answer 1

[Rst0]