flexbox로 단조를 할 때는, 대량의 텍스트가 들어간 경우를 상정하자

눈치채고 있는 분은, 꽤 있을지도 모릅니다만…
Bootstrap4의 가변 그리드(col-{breakpoint}-auto)에는 원래 너비를 초과하는 줄 바꿈이 없는 텍스트가 들어갈 때 무너지는 문제가 있습니다.
htps : // 게이 t보오 tst et al p. 이 m / cs / 4.0 / t / g d / # ゔ ぁ ぇ ぇ ぃ d th

본래 상정되는 외형



개발자 도구로 대량의 텍스트를 흘린 상태



이 문제를 해결하려고 하면 거의 모든 그리드에 손을 넣어야 하는 것 같기 때문에, 여기서는 이 문제에 대한 해결책은 생략하지만, 이러한 거동이 일어나는 원인에 대해서 써 둡니다.

flex-shrink의 역할

결론에서 쓰면 flex-shrink:1 을 지정하지 않기 때문입니다.

여기에, float를 사용했을 경우와, Flexbox를 사용했을 경우의 샘플을 만들었습니다.
왼쪽에 폭 고정 박스, 오른쪽에 폭 가변 박스와 텍스트가 있는, 자주 있는 컴퍼넌트입니다.

세 번째 "flexbox + flex-grow:1 & flex-shrink:0"의 패턴은, 대량의 텍스트가 들어갔을 경우에 늘어나 버립니다.
flex-grow나, flex-basis를 지정했을 때, 텍스트가 적은 경우만으로 동작 확인을 하고 있으면, 이 사고가 일어나기 쉬워집니다.

웹 크리에이터 박스의 치트 시트에서는 flex-shrink의 역할에 대해 다음과 같이 설명합니다.

flex-grow 와 반대로, 부모 요소에 남은 스페이스가 없어 모든 자식 요소가 끊어지지 않는 경우, 지정이 있는 자식 요소가 다른 자식 요소에 대해서 얼마나 축소되는지를 지정합니다.
htps //w w.ぇbc레후 r보x. 코 m / 테 ch / c s - f ぇ x 보 x - 치 ぇ 아 t ぇ t

즉 flex-shrink는, flex-grow에서는 팔로우할 수 없는, 박스의 폭이 늘어났을 때에 적절한 폭으로 제한하는 역할을 가지고 있는 것입니다.
어떤 요소가 들어갈지 예측할 수 없는 가변 상자에서는 flex-grow와 flex-shrink를 모두 지정하는 것이 좋습니다.

도망치는 것은 부끄럽지만 유용하다.

이상, flex-grow:1과 함께 flex-shrink:1도 지정하자는 이야기였습니다만, 이러한 「무엇이 들어가는지, 좌측이 어떠한 폭이 될지 모른다」 상황의 경우, 구래 의 float + overflow:hidden 라든지, display:table 쪽이 무난한 일도 있습니다.

CSS Grid가 더 편하게 사용할 수 있게 되면 그것에 넘어선 적은 없고, 이상적입니다만…