boxの中に等間隔で要素を配置し間を開ける

Question

Wrapperボックスの中に複数のボックスをflexで横並びに配置しております。
これを等間隔で相対的に配置するために、それぞれのcontainerボックスを50%に指定しております。
また、.box_1stの左はmarginなしと.box_2ndの右はmarginなしに設定したいと考えておリます。

JS Fiddle

これらを意図して、配置したのですが、.box_1stのmargin-leftと.box_2ndのmargin-rightに
隙間ができてしまい、また、btnを選択する前後でcontainer_Aの大きさが変わってしまいます。

常に左右のボックスがそれぞれ左右に接して配置され、間に固定の間隔を入れたいのですが
どこに問題があり、どのように解決すればよろしいでしょうか？

よろしくお願い申し上げます。

<style>
#wrapper{
  padding: 5px;
  border:solid 1px #000000;
  width:120px;
}

#wrapper{
  display:flex;
}

.boxs{
  border:solid 1px #ff0000;
  width:50%;
}

.box_1st{
  margin-right:5px;
}
.box_2nd{
  margin-left:5px;
}
</style>


<div id="wrapper">

  <div id="container_A" class="boxs box_1st">
  box A
  </div>
    <div id="container_B" class="boxs box_2nd">
  box B
  </div>
    <div id="container_C" class="boxs box_2nd">
  box C
  </div>
 
</div>

<button id="btnB"> pushB</button>
<button id="btnC"> pushC</button>


<script>
  $(function(){
   $('#container_B,#container_C').hide();

   $('#btnB').on('click',function(){
   $('#container_C').hide();
   $('#container_B').show();
})

$('#btnC').on('click',function(){
$('#container_B').hide();
$('#container_C').show();
})

})
</script>

Answer 1

cssの2つめの「.box_1st」は「.box_2nd」の間違いですよね？
こちらでいかがでしょうか。

#wrapper{
  display: flex;
  padding: 5px 0;
  border: solid 1px #000000;
  width: 120px;
}

.boxs{
  border: solid 1px #ff0000;
  width: calc(50% - 7px);
}

.box_1st{
  margin-right: 5px;
}

.box_2nd{
  margin-left: 5px;
}

marginの5pxと、両サイドの線1pxずつ、計7pxをcalcで50%から引いています。

Comments

[SugiuraY]

コメントありがとうございます。
calcを初めて知りました、、調べましたら異なる単位等をcss上計算して
使用することができたりするのですね、ご教示ありがとうございます。