画面のサイズを変えてもバランスを変えない記述を知りたい

Question

左右の外面の領域を画面を縮めても比率を変えたくないのですが、どうしたら左右同じように縮むのかアドバイスもらいたいです。

 <div class="wrapper">
        <div class="left-main">
        </div>
        <div class="right-main">
        </div>
    </div>

.wrapper{
  display: flex;
}

.left-main{
  height: calc(100vh - 100px);
  width: 500px;
  margin-right: auto;
  background-color: black;
  overflow: scroll;
}
.right-main{
  width: calc(100vw - 500px);
  height: calc(100vh - 100px);
  margin-left: auto;
  background-color: red;
}

7：3くらいにしたくて、このように30％、70％にしましたが画面が白くなってしまい、widthがかかっていないので、どういった表記に変えたらいいかわからないのでアドバイスいただきたいです。

.left-main{
  width: 30%;
　height: calc(100vh - 100px);
  margin-right: auto;
  background-color: black;
  overflow: scroll;
}
.right-main{
  width: 70%;
  height: calc(100vh - 100px);
  margin-left: auto;
  background-color: red;
}

Comments

[dit.]

「30％、70％」にしたときのコードを質問に追記してみてください。

Answer 1

ありがとうございます。30％と70％にしてみましたが、色が消えてしまいました、、、

エスパーしてみると、全角の％を半角の%に修正するとうまくいくと思う。

Comments

[kdh]

恥ずかしながら全角でした、、、ありがとうございました！

Answer 2

.left-main, .right-mainのwidthを実数ではなくパーセント指定すればいいのでは？

Comments

[kdh]

ありがとうございます。30％と70％にしてみましたが、色が消えてしまいました、、、
検証画面で見るとwidthがかかっていない様子です。