[CSS] (미해결) :first-child 또는 :not(:last-child)

레이아웃을 수정하기 위해 CSS 코드를 작성하는 중, 희한한 버그를 발견했다.

부모 요소에 display: flex를 주고, flex-direction을 column으로 설정, 너비(width)를 50%으로 만들어둔 레이아웃이다.

HTML

<div id="parent">
  <div class="view-column"></div>
  <div class="view-column"></div>
</div>

CSS

#parent {
  display: flex;
}

.view-column {
  display: flex;
  flex-direction: column;
  width: 50%;
}

그러면 view-column이라는 요소가 화면을 세로 방향(column)으로 50%씩 차지하게 된다.

여기서 두 번째(마지막) view-column 요소의 넓이를 약간 더 넓히고 싶어서,

.view-column:first-child {
  width: 45%;
}
.view-column:last-child {
  width: 55%;
}

라고 수정했다.
결과는 :last-child만 적용되고, :first-child는 무시되는 현상이 생겼다.

혹시 내가 :first-child의 사용법을 잘 몰라서 뭔가 잘못되었나 싶어 MDN을 찾아봤지만 잘 모르겠다.

참고: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.

라고 나와있으니, 잘못 사용한 것 같지는 않아보인다.
그럼 대체 뭐가 문제인 걸까?

:first-child를 :nth-child(1)로 수정해보았다.

.view-column:nth-child(1) {
  width: 45%;
}
.view-column:last-child {
  width: 55%;
}

결과는, 여전히 :last-child만 적용된다.

이번에는 첫 번째 요소를 :not(:last-chilid)로 수정해보기로 했다.

.view-column:not(:last-child) {
  width: 45%;
}
.view-column:last-child {
  width: 55%;
}

결과는...
적용이 된다!

하지만 여전히 이유를 모르겠다.

혹시 요소가 2개밖에 없을 때는 :first-child가 듣지 않는 버그가 있나 싶어서 .view-column을 하나 더 추가해보았지만, 똑같이 :first-child나 :nth-child(1)은 안 되고 :last-child만 적용이 되는 현상을 발견했다.

:last-child를 제거하고, :first-child만 두었을 때도 마찬가지로 적용이 되지 않더라.

flex 레이아웃과 연관이 있을 것 같기도 한데, 아직은 잘 모르겠다. ㅠㅠ