webkit-fill-available;1

• 

  마진 넣으면 부모박스를 넘어버리는 현상 댓글페이지를 만들고있는데 대댓글부분에서 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는 이건 크롬이나 사파리에서만 적용이.. 개발/CSS 2023. 10. 16.