CSS:overflow

overflow-x

x축 기준.

overflow-y

y축 기준.

Scroll 영역의 크기를 100%로 만드는 방법

• (CSS) scroll 영역의 크기를 100%로 만드는 방법 — 코딩으로 세계정복

우선 부모 컴포넌트를 position: relative로 설정한다:

height: 100%;
width: 100%;
position: relative;

overflow 속성을 가진 자식 컴포넌트를 position: absolute로 설정한다:

position: absolute;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;

Tooltip 같은게 안보일 경우

일반적인 상황에서 Tooltip 같은게 안보이면 상위 Elem 들 중에 overflow: hidden 으로 설정된게 있는지 확인해보라.

Overflow 에서 숨겨진 Element 를 보이는 방법

• CSS { In Real Life } | Oh No, Overflow! - 외부 elem 을 :has()로 해결하는 방법.
• Experience in Escape CSS Overflow | by Jen-Hsuan Hsieh (Sean) | A Layman | Medium - Medium 로그인 필요. 참고로 javascript를 사용한 방법임.
• Popping Out of Hidden Overflow | CSS-Tricks - CSS-Tricks - 이것도 javascript를 사용한 방법임.

툴팁(Tooltip)의 경우

툴팁(Tooltip)을 사용할 경우 툴팁 룰을 참고하여 js 사용을 고려해보라... 라는 게시물 이 있더라. 관련 내용은 ARIA: tooltip role - Accessibility | MDN 이다.

See also

• CSS

Favorite site

• [추천] overflow-x, overflow-y (CSS3 properties) - 오버플로 상태에 따른 상태변화 테스트