Показать div в строке на маленьких экранах

Question

Я пытаюсь отобразить эти div с помощью flex. Но когда ширина экрана становится меньше примерно 500 пикселей, я вижу только один элемент в строке. Как сохранить 2 деления в строке, когда ширина экрана становится меньше, чем была раньше?

.box {
  display: flex;
  flex-wrap: wrap; 
  align-content: space-between;
}
.wrapper {
  margin: 20px;
  background: beige;
  border-radius: 15px;
}
.divla{
  margin: 15px;
}
@media(max-width:500px) {   
.box{      
  width: 50%;
}

 <div class="box">
   <div class="wrapper">
     <div class="divla">
        <h2 style="text-align:center; margin-top: 3px">hello</h2> 
     </div>
   </div>
   <div class="wrapper">
     <div class="divla">
        <h2 style="text-align:center; margin-top: 3px">hello</h2> 
     </div>
   </div>
   <div class="wrapper">
     <div class="divla">
        <h2 style="text-align:center; margin-top: 3px">hello</h2> 
    </div>
   </div>
</div> `

Answer 1

Пожалуйста, используйте nowrap вместо wrap в свойстве flex-wrap.

.box {
  display: flex;
  flex-wrap: nowrap; 
  align-content: space-between;
}

Вы также можете удалить flex-wrap: nowrap; из класса, поскольку nowrap установлен по умолчанию.

.box {
  display: flex;
  align-content: space-between;
}