한 화면에서 일부 내용만 좌우 스크롤

상황

한 화면에서 전체적인 문서는 화면에 대해서 flex 하게 움직여야하고 일부 컨텐츠가 좌우로 스크롤이 돼야하는 상황이 있다.

파란 부분은 화면 flex에 의해 이동, 빨간 부분은 아래 code 부분이며 좌우 스크롤이 생겨야함.

<div classname="flex flex-1 flex-col gap-20 p-5 md:ml-56">
    <h1></h1>
    <p>해당내용은 전체적으로 화면에 맞춰 flex하게 진행</p>
    <br/>
    <pre style="overflow-x:scroll">
        <code style="white-space:pre">
            코드의 형태는 화면이 줄어들어도 동일해야하므로 좌우 스크롤
        </code>
    </pre>
</div>

환경이해

우선 해당 화면 자체 최상위 객체는 flex, flex-direction: column 이고 그 안에 요소들이 들어있는 상황이다.

overflow 는 자식요소의 실제너비가 부모의 너비보다 클 때만 스크롤이 생긴다. 하지만 min-width가 기본값 auto면 자식너비를 허용하게 된다. 그래서 줄바꿈 없이 부모요소가 확장된다.

이 상황에서는 code 태그는 wite-space:pre 상태로 화면에 관계 없이 너비를 유지하게 되면서 전체 화면에서 스크롤이 생겨버린다. 브라우저의 경우 좌우로 스크롤을 하겠지만 모바일하고 같이 쓰는 환경에서는 해당 방식은 view 자체에 스크롤이 생겨 문제가 발생한다.

문제해결

overflow를 적용하기 위해서는 width요소가 상위요소에 적용돼야하는데 위와같이 아무것도 없으면 width가 적용 안돼서 발생한 문제이다. 상단에 min-width 요소를 적용하여 너비를 지정하여 overflow가 동작하도록 한다.

<div classname="flex flex-1 flex-col gap-20 p-5 md:ml-56 min-w-[0px]" >