[CSS] overflow 될 때 padding/margin이 무시되는 현상

Safari(17.5)에서 padding이 적용되지 않는 문제가 있었다.

메세지에 의한 overflow로 스크롤이 생겼다.
스크롤(역방향)을 끝까지 올려도 부모에 설정한 padding-top이 적용되지 않고 있다.

---

무한스크롤을 위한 타겟요소를 감지하지 못함

<div
	{...props}
	style={{
		display: "flex",
		flexDirection: reverse ? "column-reverse" : "column",
		overflow: "auto",
		overflowAnchor: "none",
    }}
>
	{children}
	<div ref={observerTarget}/> // target요소
</div>

무한스크롤을 위해 target으로 비어있는 div태그를 넣어두었는데 이를 감지하지 못하여 정상적으로 작동하지 않고 있었다.

비슷한 문제를 겪은 글(링크)을 읽어보고 overflow가 content영역에 의해서만 일어날 수 있다는 것을 알게 되었다.

아마도 타겟요소로 넣어둔 div의 사이즈나 내용이 없어서 타겟div에 의한 overflow가 일어나지 않았던 것 같다.

아래와 같이 div태그를 수정하였다.

<div style={{ flex: "0 0 1px" }} ref={observerTarget}/> // target요소

target요소의 1픽셀만큼 content영역이 생기고 이에 따라 overflow가 적용된 모습이다.