padding-bottom: 60%과 가로스크롤 질문

height; 0을 주고 padding-bottom에다가 %을 하면 부모의 width 값이 크거나 작아지면서 변할때 마다 그 width값의 60%가 해당 요소의 hieght 값이 된다는 거는 알겠는데

그럼 padding-bottom이 .card-image의 높이 역할을 대신해준다고 보면 될까요?

굳이 padding-bottom에다가 % 주는거 말고, .card-image의 height에다가 %를 직접 주지 않는 이유를 생각 해봤는데

그냥 .card-image(자식)에 height: 60%을 하게 되면  

부모인 .card-item의 width 60% 값을  .card-image의 height으로 설정 하는게 아니라

.card-item(부모)의 height 60% 값을 .card-image의 height으로 하는 것 같군요.

결론은 .card-item(부모)의 width값이 변할때마다 .card-image의 height 값을 유동적으로 바꿀려면 padding를 이용해서 마치 (padding-bottom 또는 padding-top)이 .card-image(자식)의 height처럼 작동 해야하는 군요.

어떤 요소의 padding 값에 % 주게 되면 그 값의 기준은 그 요소의 부모의 width값인지 궁금합니다.

자식의 height에 직접 %으로 준거는 부모의 height를 기준으로 계산하기 때문에 

기존의 height 값을 0으로 초기화하고

부모의 width 값을 기준으로 % 계산을 하는 padding-top 또는padding-bottom을 이용해서 hight을 설정 하는 것 같은데 맞나요?

padding-top, padding-bottom, padding-left, padding-right 모두 %를 쓰게 되면 부모의 width값을 기준으로 되는 것 같은데 맞나요?

============

선생님 가로스크롤를 overflow로 해결하셨는데

저는 이해가 되지 않아서 혹시 그림으로 설명 가능할까요? ㅠㅠ

margin: 0 - 1rem; 부터 개발자 도구를 봐도 잘 모르겠습니다 ㅠㅠ

그리고 .cart-list-con으로 감싼 이유가 뭔가요? ㅠㅠ