margin은 엘리먼트의 위치를 조정할뿐 wrapper의 크기를 확장시켜주지 않는다. 그래서 overflow: scroll일때 margin 값이 먹지 않는다.
다음과 같은 슈도 코드를 이용해서 해결할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| .wrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
border: 1px grey solid;
}
.item {
width: 200px;
position: relative;
margin-right: 20px;
border: 1px red solid;
flex-shrink: 0;
}
.item:last-child:after {
content: "";
display: block;
position: absolute;
right: -20px;
width: 20px;
height: 20px;
}
|
1
2
3
4
5
6
7
8
9
10
| <div class="wrapper">
<div class="item">안녕</div>
<div class="item">안녕</div>
<div class="item">안녕</div>
<div class="item">안녕</div>
<div class="item">안녕</div>
<div class="item">안녕</div>
<div class="item">안녕</div>
<div class="item">안녕</div>
</div>
|
Reference
https://blog.alexandergottlieb.com/overflow-scroll-and-the-right-padding-problem-a-css-only-solution-6d442915b3f4
Comment and share
