html pre, code tag overflow in grid

서론

markdown 을 적용하는 경우

<pre>
    <code>
        console.log("hello world");
    </code>
</pre>

처럼 pre 태그 밑에 code 태그를 사용하여 코드블럭을 구성한다.

나의 경우 블로그를 제작하면서 css grid 로 layout을 구성해서 그밑에 마크다운을 적용하기 위한 pre 태그와 code 태그가 위치한다. 하지만 그렇게 해서 코드블럭을 입력하면 grid가 overflow 되는 문제가 발생한다.

처음에는 온갖 구글링을 하며 overflow를 없애보려고 했는데 잘 되지 않았다. 원하는 방식은 code block 이 grid element 크기보다 가로폭이 클때 스크롤이 되는 것이다. pre태그와 code 태그를 아무리 수정해도 되질 않고 overflow가 되지 않았다.

해답은 grid overflow에 있었다. 하위 요소 때문에 overflow가 일어나는 경우 grid element도 같이 overflow가 되어 버려서 스크롤이 되지 않는 것이었다.

해결법

grid-template-columns: 300px minmax(0,1fr);

이와 같이 overflow가 발생하는 grid element의 max 크기를 minmax(0,1fr)로 최소 0, 최대 1fr로 고정시켜버린다. 그러면 더이상 overflow가 발생하지 않는다.