flexbox에서 가변요소의 자식width가 부모width를 넘을때

<div class="flex">
  <div class="col-1"></div>
  <div class="col-2">
    <p>긴무우우우운자아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아앙</p>
  </div>
</div>

.flex{
  display: flex;
  width: 540px;
  background-color: rgb(236, 161, 48);
}

.col-1{
  width: 200px;
  background-color: rgb(42, 152, 138);
  padding: 8px;
}

.col-2{
  flex: 1;
  padding: 8px;
}

.col-2 p {
  font-size: 36px;
  color: black;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

col-2 p 에는 overflow hidden같은 속성을 먹였음에도 제대로 적용이 안된다.

이렇게 overflow가 안 먹힌다는건 자신의 width가 제한이 안되어 있다는걸 의미한다.

부모의 width: 540px을 제한으로 자식도 당연히 제한이 540px? 로 될꺼라고 인식하고 있지만, 왜? 이렇게 제한이 안걸리는걸까?

원인보다는 일단 해결방법부터..!

우선 해결방법은 3가지가 있다.

1. 가변요소의 자식(.col-2)에 max-width: calc(100vw - ○○px); (이건 비추천.. 경우에 따라서)

2. 가변요소의 자식(.col-2)에 min-width: 0;

3. 부모요소(.flex)에 overflow: hidden;

원인

min-width: auto; 가 Flex 아이템(자식) 최소폭의 초기값이다. 이 값은 초기값인 flex-basis:auto;보다도 우선적으로 적용되기 때문에 내부 콘텐츠의 비대화에 의해 Flex 컨테이너 영역을 벗어나 버린다. 그래서

min-width: 0;

을 지정하면, flex-basis: auto; 가 우선해서 적용되게 되어, 아이템의 폭이 컨테이너내에 들어가도록 결정된다. 이렇게 하면  "플렉스 아이템이 플렉스 컨테이너 밖으로 튀어나오고 있다" 라고 인식이되므로 컨테이너 안에 아이템들을 격납할 수 있다.

.col-2 {
  flex: 1;
  background-color: rgb(236, 161, 48);
  padding: 8px;
  min-width: 0;
}