티스토리 뷰
적어놓고 잊지 말아야 한다.
https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
white-space: nowrap breaks flexbox layout
I have created a responsive layout for an app using Flexbox. The layout calls for a collapsible menu on the left, a block with a header and body in the middle and a toggleable help-pane on the right (
stackoverflow.com
여기 답변을 보자, 플렉스박스의 기본 동작이 그렇기 때문이다. 플렉스박스는 자기 자신의 컨텐츠보다 작아지지 않는다. 사실 이 답변에 인용된 표준 문서의 https://www.w3.org/TR/css-flexbox-1/#min-size-auto
CSS Flexible Box Layout Module Level 1
Adjusted min-width: auto to only apply the computed main size as a minimum in cases where the flex basis was retrieved from the main size property. (Issue 19) … is defined if the item’s computed flex-basis is auto and its computed main size property is
www.w3.org
이 섹션을 보는 게 더 좋겠다.
display: flex;의 자식들은 min-width: auto;가 된다, 그러므로 자식 개체에 white-space: nowrap;을 적용할 때에는 min-width: 0;도 함께 지정해주도록 하자.
잊지 말자 시리즈의 첫 번째.
'Note' 카테고리의 다른 글
| 헝가리식 노테이션, ecma script편 (0) | 2020.11.26 |
|---|---|
| 모바일 브라우저의 온스크린 키보드 유무를 확인하기 (0) | 2020.11.20 |
| 자바스크립트로 작성된 함수와 테스트를 타입스크립트로 작성하기 (0) | 2020.09.16 |
| 단일 함수에 대한 브라우저 환경의 자바스크립트 테스트 작성 (0) | 2020.09.06 |
| Jest, Jasmine의 matchers 메소드 비교, 대조 (0) | 2020.08.31 |