不要なスクロールバーの右マージン

リモートサーバーとローカルホストでは、コンテナに接続されているスクロールバーoverflow-scrollの右側に余白があるようで、背景色が透けて見えます。

ここで-コードスニペットで-コードは同一ですが、そのようなマージンはありません。

編集：動作が拡張されました

ブラウザのサイズが変更されると、要素のサイズが変更されると、背景色がスクロールバーの右側で点滅します。

さらに、要素の右側に背景が表示されていないウィンドウ幅でマウスを離すと、次のサイズ変更でも動作が持続します。しかし、背景が要素の右側に表示されているウィンドウ幅でマウスを離すと、スクロールバーが右にジャンプして背景を覆い、それが属する右端に揃えられます。その場合、動作は次のようになります。ブラウザが更新されるまで、今後のすべてのサイズ変更で修正されました。

さらに、この動作はすべての更新に存在するわけではありません。ランダムなようで、2〜3回の更新ごとに約1回です。

では、サイズ変更時に背景色がスクロールバーの右側に表示されるのはなぜですか？また、背景が表示されているときにマウスを離すと、ページの更新が禁止されている問題が一時的に修正されるのはなぜですか？

*{
	margin:0;
	padding:0;
}
.grida{
	display:grid;
	grid-template-columns:14% 1fr 1fr;
	height:calc(100vh - 52px);
}
.bpart{
	height:calc(100vh - 52px);
	overflow-y:scroll;
	background:blue;
}

<div class='grida'>
<div class='gridaa'></div>

<div class='gridab'>
<div class='bpart'></div>
</div>

<div class='gridac'></div></div>

理由が何であるかはわかりませんが、それを引き起こしているCSSはこれです

* {
    margin: 0;
    padding: 0;
}

ゼロのマージンを指定することで修正できました（を除くmargin-right）

このような

* {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0;
}

これは確かに非常に奇妙な振る舞いであり、私はこれを理解しようと長い時間を費やしたことを認めなければなりません。恐れることはありません。あなたの質問に答えることで私にとってより多くの質問が出てきましたが、以下にあなたの特定の問題に対する解決策があります。

私が知る限り、あなたは単にピクセルの丸め動作を観察しているだけです。これは、固定幅要素と流動幅要素のサイズを変更するときにすべてのブラウザーで自然に行われます。私が見る「垂直線」は、ブラウザウィンドウのサイズを変更するときにのみ存在します。grid-template-columns値がどのように設定されていても、現在のマークアップとスタイルを指定すると、すべてのブレークポイントでブラウザーの固定幅を満たすことはできません。

これは非常に簡単な数学で実証できます。

let x =ブラウザの幅（px）
let y =流体グリッドの幅の値（％）
let z =流体グリッドの実際の幅の値（px）
z = x（y）

次のことを考慮してください。

x = 1500px
y = 15％
1500（.15）= 225

グリッド幅が15％に設定されている場合、ブラウザウィンドウが正確に1500ピクセルの場合、グリッド要素の幅は225ピクセルになり、隣接するピクセルにオーバーフローしません。ただし、ブラウザのサイズを1497pxに変更してから1496pxに変更する場合は、グリッド要素の完全なピクセル幅に正確に丸める場所を選択する必要があります。グリッド要素は224.55pxから224.4pxに移動します。これは、オーバーフローコンテナ内のスクロールバーを相殺しているように見えますが、何らかの理由で（より知識のある人が説明できるといいのですが）、サイズ変更時にコンテナの右側に貼り付けられません。新しい幅が確立されるとすぐに、スクロールバーはコンテナの右側にリセットされます。これは確かに奇妙な振る舞いであり、そもそもなぜこの振る舞いが存在するのかを誰かが私の答えを拡張して説明してくれるといいのですが。

しかし、解決策に関する限り、私はそれを持っていると信じています：

bpartdiv内に全幅、全高の要素を追加しbpart、親になるの代わりに背景を割り当てるだけです。さらに、そして最も重要なbpartことは、新しい子要素がプロパティを持つ間、scrollプロパティを維持するoverflow:hiddenことです。

新しいマークアップは次のようになります。

<div class='grida'>

  <div class='gridaa'></div>

  <div class='gridab'>
    <div class='bpart'>
      <div class="bpart-inner"></div>
    </div>
  </div>

  <div class='gridac'></div>

</div>

そしてあなたのCSS：

* {
  margin:0;
  padding:0;
}
.grida {
  display:grid;
  grid-template-columns:14% 1fr 1fr;
  height:calc(100vh - 52px);
}
.bpart {
  height:calc(100vh - 52px);
  overflow-y:scroll;
}
.bpart-inner {
  height:100%;
  width:100%;
  overflow:hidden;
  background:blue;
}

私の知る限り、これは機能します。ここにフィドルがあります：

https://jsfiddle.net/x6eL5mun/4/

私が言ったように、私はデフォルトの振る舞いを説明することはできません。誰かができるなら、私はあなたと同じように興味があります。そうでなければ、このソリューションはあなたのためにそれを行うはずです。ここで私の興味をかき立ててくれてありがとう。

これは単純すぎる可能性があり、「CSSグリッド」を使用していますが、右側に煩わしいスペースがあり、水平スクロールでボタンを1回押す必要がありました。これが、少なくとも私の場合、違いを生んだ私がしたことです。幅を99％に設定します。図に行きます。

body {
    height: 650px;
    width: 99%; 
    background-color: gray;
}