[CSS] 텍스트가 자꾸 박스를 뚫어요.. (단순한 overflow: hidden 아님)

css로 골치가 아팠던 개발 경험을 기록하고자 한다. 나의 상황은 다른 개발자들한테도 충분히 발생할 수 있다고 생각한다. 그리고 나 또한 약간의 시간을 잡아먹게 되었고 몇 번 반복되다 보니 이 참에 정리하면서 문제에 대해 이해하려고 한다.

문제 상황

width가 동적으로 변경(윈도우 크기에 맞게)되는 박스 안에서 매우 긴 텍스트가 존재한다. 해당 텍스트를 부모 박스 크기를 넘어가면 넘어간 부분을 text... 처리하려고 한다.

내가 원하는 결과는 다음 그림과 같다.

그러나 자꾸 이상한 결과가 나오는 것이다. 다음 그림을 보면 텍스트가 그대로 짤린다.

기본적인 해결 방법

해당 방법은 당연히도 구글링을 통해 잘 나와있다. style 속성의 text-overflow, white-space, overflow를 다음과 같이 지정하는 것 이다.

ellipsis 효과가 적용되는 코드:

<div style={{ display: "flex", overflow: "hidden" }}>
      <img src={picture} />
      <span
        style={{
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
          overflow: "hidden",
        }}
      >
        ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ끝
      </span>
</div>

그러나 무작정 3가지 속성을 넣는다고 되는게 아니였다. 올바르게 text-overflow: ellipsis를 적용 시키려면 부모와 자식 요소의 display 속성이 올바르게 지정되어야 한다.

나의 문제 원인 및 해결

부모 요소 display 속성이 flex인 경우

자식 요소 display 속성이 block 또는 inline 경우에 ellipsis 속성이 작동이 됐다. 그러나 flex, content인 경우 적용이 되지 않았다.

부모 요소 display 속성이 block, inline인 경우

자식 요소 display 속성이 block인 경우에만 ellipsis 속성이 작동이 됐다.

원리를 모름

부모 요소의 display속성이 block or inline인 경우에는 자식 요소의 배치에 영향을 주지 않기 때문에, 자식 요소가 inline인 경우 width가 정해져 있지 않기 때문에 적용이 되지 않는다는 것으로 납득할 수 있었다.

그러나 부모 요소의 display속성이 flex인 경우는 원리를 명확히 파악할 수 없었다. 플렉스 컨테이너가 알아서 자식 요소의 크기를 조정했기 때문일까?
※ GPT 또한 올바르지 않은 코드를 반환하여 신뢰를 얻을 수 없었음

이 것을 명확히 아는 분은 댓글을 달아 주셨으면 좋겠다..