이럴 때 쓸 수 있어요.

그림과 텍스트가 병렬된 레이아웃은 매우 흔하다.
왕복 운동 방식으로 이런 배치에 대응할 때
그림보다 문자량이 많으면 그다지 아름답지 않다
디자인을 바꿀 수 없어서 스크롤 텍스트를 설치했습니다.
상당히 간단한 방법이지만 실제로는 기억이 나지 않아 비망록이다.

보통 가로로 봐요.

높이를 합쳐서 가로로 배열하면 플렉스박스!(개인적인 생각)
일시적으로 display: flex;만 지정하면
높이가 높은 쪽(텍스트)에 맞춰 형제 요소(초상화)도 길게 뻗어 있다.
See the Pen flexbox01 by YUU ( @YUUMU )
on CodePen .

높이를 조정하려는 내용 (텍스트) 에 하위 요소 만들기

flexbox의 특성상 높이가 높은 사람과 협조하는 것은 어쩔 수 없는 일이다.

높이를 조정할 내용 지정(텍스트)position: relative;,

그중에서 속옷 제작position: absolute;을 통해 높이를 지정,

지정height: 100%;을 통해 복구하려는 높이와 일치해야 합니다.

이번에 넘친 부분은 이해하기 쉽게 굴러갑니다.p>

See the Pen flexbox02 by YUU ( @YUUMU )
on CodePen .

スクロールする部分とスクロールしない部分を作る

높이가 일치하지만 넘치는 부분을 어떻게 처리하는지,

스크롤 부분과 스크롤 부분을 만들지 않으려면

물론 굴러가지 않는 요소와 굴러가는 요소는 따로 만들어진다.

그러나 position: absolute; 부모 요소가 있는 경우에는 overflow 유효하지 않습니다.

그럴 때

세로로 배열된 내용도 지정display: flex;을 통해 잘 수납하고,
overflow 자유롭게 처리 가능p>

See the Pen flexbox03 by YUU ( @YUUMU )
on CodePen .

창 너비가 줄어든다고 가정하면 넘치는 내용에 지정됩니다 overflow: auto;기본적으로 원형을 유지하다.넘으면 스크롤할 수 있는 설치.

※ 배율 전환은 이해하기 쉽습니다p>

See the Pen flex-responsive by YUU ( @YUUMU )
on CodePen .