[CSS] 가변적인 길이의 컴포넌트에서 형제요소 width에 max-width맞추기

조건

- 위 이미지에서 흰색박스(ADT Total untamount...) 영역의 width는 가변적으로 늘어나고 줄어들 수 있다.

- 흰색박스의 길이에 따라 아래 텍스트(description...) 영역의 max-width가 맞춰지고 줄바꿈 되어야 한다.

- 고정 width는 부모, 자식 어디에도 쓸 수 없다.

 

 

해결책

1. 부모요소에 max-width: min-content 속성을 준다.

2. 줄바꿈되면 안되는 요소에 white-space: nowrap 속성을 준다 (=하늘색 박스)

 

 

 

See the Pen Untitled by dayoung0510 (@dayoung0510) on CodePen.

 

뭐 자바스크립트로 흰색박스 영역 width를 구해서 그걸 max-width로 줘야하나...

이런 복잡한 생각을 했었는데 너무나도 간단하게 해결 완!