CSS "если обернуть, то потом по ширине детей"

Question

То, чего я пытаюсь достичь без JavaScript, - это разместить четыре кнопки в матрице 2x2, пока все их содержимое помещается в ячейку.Когда какой-либо из них слишком длинный для размещения, он должен обернуться в матрицу 1x4, где все ячейки имеют полную ширину.Лучшее, что я могу придумать, это что-то вроде приведенного ниже фрагмента.Это просто нормально до точки, где после обтекания ячейки должны иметь полную ширину.

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    
    border: 1px solid red;
    }

.flex-item {
    flex: 0 1 auto;
    align-self: auto;
    min-width: 40%;
    max-width: 100%;
    text-align: center;
    
    padding: 10px;
    border: 1px solid blue;
    margin: 5px;
    }

<div class="flex-container">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div>

<div class="flex-container" style="width: 280px; margin-top: 2em;">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div>

<div class="flex-container" style="width: 150px; margin-top: 2em;">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div

Answer 1

Как то так?Я сделал flex:1; для .flex-item

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    
    border: 1px solid red;
    }

.flex-item {
    flex:1;
    align-self: auto;
    min-width: 40%;
    max-width: 100%;
    text-align: center;
    
    padding: 10px;
    border: 1px solid blue;
    margin: 5px;
    }

<div class="flex-container">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div>

<div class="flex-container" style="width: 280px; margin-top: 2em;">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div>

<div class="flex-container" style="width: 150px; margin-top: 2em;">
  <div class="flex-item">AAA</div>
  <div class="flex-item">BBBBBB</div>
  <div class="flex-item">CCCCCCCCC</div>
  <div class="flex-item">DDDDDDDDDDD</div>
</div