(CSS) overflow가 작동하지 않을때 해결방법

 

 

overflow란?

 

부모 아래에 있는 자식이 부모를 넘어서게 하고 싶다고 했을 때 overflow를 사용하면 된다.

 

overflow는 말 그대로 넘치는 콘텐츠에 대한 처리 방법이다. 

 

이때 수평방향은 overflow-x, 수직방향은 overflow-y를 사용하면 된다. 

 

overflow는 크게  4가지 속성값을 가진다. x와 y는 방향만 다를 뿐 속성은 같다.

 

• visible(기본값) : 경계를 벗어나는 컨텐츠를 자르지 않고 넘치게 둔다.
• hidden : 경계를 벗어나는 컨텐츠를 자른다.
• scroll : 스크롤바를 추가해 사용자가 스크롤할 수 있게 한다.
• auto : 스크롤바가 필요하면 스크롤바를 추가, 그렇지 않으면 추가하지 않는다.

 

 

overflow가 작동하지 않을 때

 

그런데 overflow-x와 overflow-y를 사용했는데도 자식이 부모를 넘어서지 못하는 경우가 있다.

 

이는 대개 부모의 display: flex;가 원인이 될 수 있다.

 

flexbox인 부모의 자식(flex item)들은 flex box에 맞춰 크기가 조절되기 때문이다.

 

flex box에서 자식요소의 크기를 맞추는 것을 막기 위해서는 flex-shrink: 0을 사용하면 된다.

 

 

 

flex-shrink란?

flex-shrink란 flex box안에서 자식(flex item)을 얼마나 축소시킬지 지정하는 속성이다.

 

flex-shrink의 기본값은 1이다. 1보다 커질수록 해당 아이템은 다른 아이템보다 더 많이 축소되게 된다.

 

이때 flex-shrink 값을 0으로 주면 해당 아이템은 축소되지 않는다. 

 

따라서 의도대로 overflow가 작동하게 된다. 

 

 

 

overflow & flex-shrink 사용 예시

 

See the Pen overflow-x by 김다영 (@xnpzlttb-the-solid) on CodePen.