Flex-wrap not working for two children that take half of the available space by using flex-1

Issue

I am using TailwindCSS.
I have two input fields inside a div.
I want these input fields to be placed side by side whenever possible and wrap when needed. I don't have a set width for these. The parent div takes up the whole width of it's parent div.

I don't understand why the children elements don't ever wrap:

                  <div class="flex flex-wrap justify-between gap-2 w-full">
                    <div class="flex-1">
                      <label for="other_city"
                             class="block sm:text-sm font-medium text-gray-500">
                        {% translate "City" %}
                      </label>
                      <input type="text"
                             id="other_city"
                             placeholder=""
                             autocomplete="off"
                             class="mt-1 w-full rounded-md border-gray-200 text-black font-medium sm:text-sm"/>
                    </div>
                    {# Postal Code #}
                    <div class="flex-1">
                      <label for="other_postal_code"
                             class="block sm:text-sm font-medium text-gray-500">
                        {% translate "ZIP / Postal Code" %}
                      </label>
                      <input type="text"
                             id="other_postal_code"
                             placeholder=""
                             autocomplete="off"
                             class="mt-1 w-full rounded-md border-gray-200 text-black font-medium sm:text-sm"/>
                    </div>
                  </div>

Solution

flex-1 applies flex: 1 1 0%. This means that each element has flex-basis: 0. This means each element effectively has 0 width with regards to wrapping calculations before flex-grow: 1 is applied to grow the elements out to fill the width. If you want the elements to wrap at some point, consider setting a flex-basis as a minimum width for the elements, so that wrapping occurs when the two elements cannot fit on one line according to their flex-basis lengths.

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="flex flex-wrap justify-between gap-2 w-full">
  <div class="flex-1 basis-20">
    <label for="other_city" class="block sm:text-sm font-medium text-gray-500">
      City
    </label>
    <input type="text" id="other_city" placeholder="" autocomplete="off" class="mt-1 w-full rounded-md border-gray-200 text-black font-medium sm:text-sm" />
  </div>
  <div class="flex-1 basis-20">
    <label for="other_postal_code" class="block sm:text-sm font-medium text-gray-500">
      ZIP / Postal Code
    </label>
    <input type="text" id="other_postal_code" placeholder="" autocomplete="off" class="mt-1 w-full rounded-md border-gray-200 text-black font-medium sm:text-sm" />
  </div>
</div>

Answered By - Wongjn