마진 넣으면 부모박스를 넘어버리는 현상

댓글페이지를 만들고있는데 대댓글부분에서 width:100%를 해버리면 부모에서 max-width: 500px를 해둔것을 넘어버리는 현상이 생겼다.

부모의 width는 가뿐히 무시해 버린다.

 

원인

%는 상대값이기 때문에 부모의 width를 가져온다.

부모의 width는 500px이기때문에 대댓글도 width를 500px를 가지고 margin값도 가지고 있기 때문에 박스를 넘어버린것이다.

 

해결

대댓글 width: calc(100% - 4.375rem)를 넣어버렸다.

100%는 부모의 width, 4.375rem은 내가 넣은 마진값이다.

그러면 박스에 딱 맞는 width가 완성된다.

width: -webkit-fill-available;

이걸 넣어도 해결됐는데 chatGPT는 이건 크롬이나 사파리에서만 적용이 되고 다른 브라우저에서는 적용이 안된다고하여 사용하지 않았다.