症状から引く、CSS の索引

html {
  overflow-x: hidden;              /* 想定外のはみ出しを隠す保険 */
  overscroll-behavior-x: none;   /* iOS の左右の揺れを止める */
}

body {
  will-change: transform;        /* 合成レイヤーへ昇格 */
  position: relative;            /* ::before の基準にする */
  overflow-x: clip;                /* sticky を壊さずクリップ */
  z-index: 0;                     /* 重ね合わせ文脈をつくる */
  -webkit-text-size-adjust: 100%; /* iOS の文字拡大を防ぐ */
}

/* 背景の模様は擬似要素へ逃がす */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: ...;
  background-size: 44px 44px;
}

/* 横スクロールさせたい箱 */
.scroll-box {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;                    /* 縮む余地 */
  -webkit-overflow-scrolling: touch;
}

/* 中身がブロック要素で、折り返さない場合だけ */
.scroll-box > .line {
  width: max-content;
  min-width: 100%;
  white-space: pre;
}

/* 縦だけスクロールさせたい箱 */
.list-box {
  max-height: 230px;
  overflow-y: auto;
  overflow-x: clip;              /* 横も必ず明示する */
  min-width: 0;
}

/* フレックスの子で省略表示したい */
.flex-parent > .ellipsis {
  min-width: 0;                    /* これが無いと効かない */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

(function(){
  var de = document.documentElement, vw = de.clientWidth;
  console.log('画面幅: ' + vw + '  文書幅: ' + de.scrollWidth);

  // 祖先のどこかで横がクリップされていれば、ページ幅には響かない
  function contained(el){
    for (var p = el.parentElement; p && p !== de; p = p.parentElement)
      if (getComputedStyle(p).overflowX !== 'visible') return true;
    return false;
  }

  var hits = [];
  document.querySelectorAll('body *').forEach(function(el){
    var r = el.getBoundingClientRect();
    if (r.width === 0 && r.height === 0) return;
    if (getComputedStyle(el).position === 'fixed') return;
    if (r.right <= vw + 1 && r.left >= -1) return;
    if (contained(el)) return;
    hits.push({ el: el, tag: el.tagName.toLowerCase(),
      cls: el.className && typeof el.className === 'string'
           ? '.' + el.className.trim().split(/\s+/).join('.') : '',
      over: Math.round(r.right - vw) });
  });

  // 祖先を除き、末端だけ残す
  var leaves = hits.filter(function(h){
    return !hits.some(function(o){
      return o.el !== h.el && h.el.contains(o.el); });
  });

  console.log('はみ出し: ' + leaves.length + '件');
  console.table(leaves.map(function(h){
    return { タグ:h.tag, クラス:h.cls, 超過:h.over }; }));
  leaves.slice(0,3).forEach(function(h,i){
    h.el.style.outline = '3px solid ' + ['red','orange','yellow'][i];
  });
})();

/* 配信されなかった広告枠を消す */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* 高さが確定するまでの1秒ほどを予約しておく */
aside.ad-wrapper {
  width: 100%;
  max-width: 100%;
  min-height: 200px;   /* 実際の広告高さに合わせる */
  overflow: hidden;
  contain: layout;
}