Q: Resizing an HTML dialog tag horizontally with contents that wrap? CodePen
I have an HTML dialog tag full of content. I want the content to respond to its container's height, wrapping to create a new column when the content is larger than the container. I have boundaries on how tall the container can be, as well, for aesthetic reasons
I'm accomplishing this with flex-flow: column wrap and that works fine to make the contents create a new column, but the containing dialog isn't resizing to contain it. Is there a way to make the dialog tag grow to encompass the contents as they flow?

A: This is a known problem: When flexbox items wrap in column mode, container does not grow its width
tl;dr- Current browsers do not horizontally expand flex containers  which have flex: column wrap set, although they do expand vertically for flex: row wrap

A: Add a max-height CSS property in vh units (vertical height, where 100 is full window height). CodePen


.country-selector-stylized-dialog .country-selector-container {
  display: flex;
  flex-flow: column wrap;
  height: 10em;
  max-height: 60vh;
}
  <dialog class="country-selector-stylized-dialog" open="">
    <div class="country-selector-container">
      <div class="country-selector-item country-selector-current-item"> Ireland </div>
      <div class="country-selector-item"> Australia </div>
      <div class="country-selector-item"> België </div>
      <div class="country-selector-item"> Brazil </div>
      <div class="country-selector-item"> Canada </div>
      <div class="country-selector-item"> Danmark </div>
      <div class="country-selector-item"> Deutschland </div>
      <div class="country-selector-item"> España </div>
      <div class="country-selector-item"> France </div>
      <div class="country-selector-item"> India </div>
      <div class="country-selector-item"> Italia </div>
      <div class="country-selector-item"> Nederland </div>
      <div class="country-selector-item"> New Zealand </div>
      <div class="country-selector-item"> Norge </div>
      <div class="country-selector-item"> Österreich </div>
      <div class="country-selector-item"> Schweiz </div>
      <div class="country-selector-item"> Singapore </div>
      <div class="country-selector-item"> Suomi </div>
      <div class="country-selector-item"> Sverige </div>
      <div class="country-selector-item"> United Kingdom </div>
      <div class="country-selector-item"> United States </div>
      <div class="country-selector-item"> 日本 </div>
    </div>
  </dialog>


