문제 상황
overflow-x:scroll인 요소의 자식 요소의 오른쪽 마진이 적용되지 않아 스크롤이 안 생기거나, 더 짧게 생기는 현상이 발생한다.
See the Pen Margin right not working inside Overflow-x:scroll Element by arori (@arori) on CodePen.
원인
공식 문서에 따르면 블록 레벨 요소에서 direction이 ltr이고, 자식이 margin, border, padding, width를 포함하여 부모를 넘는다면 margin-right가 무시된다. 문제 상황처럼 꼭 overflow-x: scroll이 아니더라도 발생할 수 있다.
10.3.3 normal flow에서 block-level, non-replaced 요소
다른 프로퍼티의 사용된 값 사이에는 다음과 같은 제약조건을 따른다:
‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = containing block 의 width
만약 ‘width’가 ‘auto’가 아니고 ‘border-left-width’+ ‘padding-left’+ ‘width’+ ‘padding-right’+ ‘border-right-width’ ( + ‘auto’가 아닌 ‘margin-left’ 또는 ‘margin-right’)가 containing block보다 클 경우, ‘margin-left’또는 ‘margin-right’에 대한 ‘auto’값은 아래 규칙에 의해 0으로 처리된다.
위의 모든 값이 ‘auto’가 아닌 계산된 값을 갖는 경우, “over-constrained(과도하게 제약됨)”라고 하며, 사용한 값 중 하나는 계산된 값과 달라야한다. containing block의 ‘direction’속성에 ‘ltr’값이 있으면, ‘margin-right’의 지정된 값이 무시되고, 등식을 참이 되도록 값이 계산된다. ‘direction’의 값이 ‘rtl’이면 ‘margin-left’에 대신 발생한다.
…
해결 방법
블록 레벨이 아니면 위와 같은 계산식을 따르지 않기 때문에 해결된다. block이라면 inline-block으로, table이라면 inline-table로 변경하는 방법으로 해결할 수 있다.