スクロールバーの幅を無視したいです

Question

###実現したいこと
縦にリストが並んでいまして、「.side」のリストの幅を、「.main」のリストの幅と同じにしたいです。

###問題
まず「.main」ありきで、のちに「.side」が出てくるのですけど、スクロールバーの幅があるせいで、リストを同じ幅にできないという問題にぶちあたりました。

###コード
こちらのコードです。
「.side」と「.main」はピンクで、その中の赤い四角がリストです。

sample!

<div>
  <div class="main">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
  </div>
  <div class="side">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
  </div>
</div>

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
div {
    display: flex;
    height: 100vh;
}
.main, .side {
    background: pink;
    width: 50%;
    margin: 10px;
    padding: 15px;
}
.main {
    height: 1000px;
}
.side {
    overflow-y: scroll;
    height: 200px;
}
ul {
    width: 100%;
}
li {
    background: red;
    margin: 10px;
    text-align: center;
    height: 500px;
}

JSでリストをouterWidthすればいいだけですが、

この幅の調整、CSSでできませんでしょうか！？

解決策をよろしくお願い致します。

なお、リストの幅をそろえれば「.side」のピンクの部分はスクロールバーの分だけせまくなりますがもちろん構いません。

###追記
できればブラウザによって挙動が変わったりしないような処理がありましたらお願い致します。

Answer 1

scrollbar-widthプロパティ

まだすべてのブラウザで安定して使用できるわけではありませんが、scrollbar-widthプロパティを用いることが可能です。ブラウザによってはこのプロパティを使う際にプレフィックスが必要な場合もあるため、対応したいブラウザによってCan I useをみながら対応をしてください。

以下のコードは、Firefoxの最新版で動作します。

<div>

  <div class="main">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <div class="side">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

</div>

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

div {
  display: flex;
  height: 100vh;
}

.main,
.side {
  background: pink;
  width: 50%;
  margin: 10px;
  padding: 15px;
}

.main {
  height: 1000px;
}

.side {
  overflow-y: scroll;
  height: 200px;
  scrollbar-width: none;
}

ul {
  width: 100%;
}

li {
  background: red;
  margin: 10px;
  text-align: center;
  height: 500px;
}

絶対配置

絶対配置によってスクロールバーの幅分だけ要素をずらして、スクロールバーを隠す方法です。しかし、スクロールバーの幅を取得する手段がないので、ここには固定の値を設定しないといけません。なので、ブラウザによってはちゃんとスクロールバーが隠れないことがあります。そういう場合を防ぐために対応ブラウザを用いたテストを行う必要が生じます。

このコードはFirefoxで動作します。

<div>

  <div class="main">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <div class="wrapper">
    <div class="side">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

</div>

* {
  margin: 0;
  padding: 0;
  list-style: none;
}


div {
  display: flex;
  height: 100vh;
}

.main,
.wrapper {
  background: pink;
  width: 50%;
  margin: 10px;
  padding: 15px;
}

.main {
  height: 1000px;
}

.wrapper {
  overflow: hidden;
  position: relative;
  height: 200px;
}

.side {
  height: 200px;
  overflow-y: scroll;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -17px;
  padding: 15px;
}

ul {
  width: 100%;
}

li {
  background: red;
  margin: 10px;
  text-align: center;
  height: 500px;
}

追記を受けて

できればブラウザによって挙動が変わったりしないような処理がありましたらお願い致します。

であれば、JavaScriptを使ってください。現状のCSSで使える機能だけではそれらを保障することは出来ません。

Answer 2

カスタムプロパティを使えば可能ですが、IE で使えないので対応する場合は決め打ちもしなければならないかもしれませんね。

:root {
    overflow-y: scroll;
    margin: 0;
    padding: 0;
    --scrollbarwidth: calc(100vw - 100%);
}

.main, .side {
  /* fix */
  box-sizing: border-box;
  background: pink;
  /* fix */
  width: calc(50% - 20px);
  margin: 10px;
  padding: 15px;
}

.side {
    padding-right: calc(15px - var(--scrollbarwidth) / 2);
    padding-left: calc(15px - var(--scrollbarwidth) / 2);
}

https://developer.mozilla.org/ja/docs/Web/CSS/--*