flex로 잡은 카드나 목록이 모바일에서만 화면 밖으로 밀려나고 가로 스크롤이 생긴다면, flex 아이템의 기본값인 min-width: auto를 먼저 의심해 보세요.
긴 URL, 줄바꿈 없는 말줄임 텍스트, 코드 블록이 들어간 자식에 min-width: 0을 주면 대부분 바로 정리됩니다.

1. 말줄임(...)이 안 되고 박스가 늘어날 때

게시판 목록처럼 썸네일 옆에 제목을 두고 한 줄 말줄임을 걸면, PC에서는 멀쩡한데 좁은 화면에서 제목이 끝까지 다 나오면서 레이아웃을 밀어내는 경우가 많습니다. 말줄임 CSS 자체는 맞는데, 그걸 감싼 flex 아이템이 줄어들지 않아서 생기는 문제입니다.

.item { display: flex; gap: 12px; }
.item .thumb { flex: 0 0 80px; }

/* 핵심: 텍스트 쪽 아이템이 줄어들 수 있게 */
.item .text { flex: 1; min-width: 0; }

.item .title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

min-width: 0은 말줄임이 걸린 요소가 아니라 그 요소를 담고 있는 flex 아이템에 줘야 합니다. 중간에 div가 한 겹 더 있다면 flex 아이템인 그 div에 넣어야 효과가 있습니다. overflow: hidden을 줘도 같은 효과가 나지만, 그림자나 툴팁이 잘릴 수 있어서 실무에서는 min-width: 0을 더 많이 씁니다.

2. grid의 1fr도 같은 함정이 있습니다

본문과 사이드바를 grid-template-columns: 1fr 300px로 나눴는데 본문에 넓은 표나 <pre> 코드가 들어가면 본문 칸이 늘어나 버립니다. 1fr은 사실상 minmax(auto, 1fr)이라 최소값이 내용물 크기이기 때문입니다.

/* 내용물이 넓어도 칸은 남은 공간만큼만 */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}

/* 넓은 내용물은 자기 안에서 스크롤 */
.layout pre,
.layout .table-wrap { overflow-x: auto; }

3. 어느 요소가 범인인지 빨리 찾는 법

가로 스크롤 원인을 눈으로 찾기 어렵다면 크롬 개발자도구 콘솔에서 화면 폭보다 넓은 요소를 뽑아 보는 방법이 빠릅니다. 저희도 리뉴얼 검수 때 360px 폭에서 이 방법으로 먼저 확인합니다.

// 콘솔에 붙여 넣고 실행
[...document.querySelectorAll("*")]
  .filter(el => el.scrollWidth > innerWidth)
  .forEach(el => console.log(el));

목록에 찍힌 요소 중 가장 안쪽에 있는 것이 보통 원인입니다. 그 요소의 부모를 따라 올라가다 처음 만나는 flex·grid 아이템에 min-width: 0을 주면 됩니다. 긴 URL처럼 아예 줄바꿈이 필요한 경우에는 overflow-wrap: anywhere를 함께 쓰세요.