Как изменить размер группы <div>, чтобы она отображалась в одной строке, если их больше 2?

Question

Когда у меня есть только 2 <div>, я хочу, чтобы у каждого было одинаковое width, но я хочу уменьшить их, когда у меня будет 3 <div>, чтобы остаться на той же линии.

Но когда у меня будет 4 <div>, я вернусь go к первому width (так же, как когда у меня всего 2 <div>) и будет две строки, в каждой строке 2 <div>

Мне нужно Javascript, чтобы выполнить это? любой другой способ, просто используя HTML / CSS?

Вот мои html и css для 3 деления:

.bigBox{
  width:100px;
  height:50px;
  background: red;
}

.A{
   width: 40%;
   height: 50%;
   float: left;
   background: blue;
   margin-left:5px;
 }

<div class="bigBox">
   <div class="A a">

   </div>
   <div class="A b">

   </div>
  <div class="A c">

  </div> 
</div>