Resizing an HTML dialog tag horizontally with contents that wrap?

Question

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?

score 1 · Accepted Answer · answered Jun 10 '19 at 19:24

1

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

answered Jun 10 '19 at 19:24

ABMagil

4,579
4
21
35

2

I guess you can mark the linked thread as a duplicate to your question :) – kukkuz Jun 11 '19 at 04:03

score 0 · Answer 2 · answered Jun 10 '19 at 18:11

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>

What I'm seeing is just the dialog at the same size, with the content off to the right — ABMagil, Jun 10 '19 at 18:25
@ABMagil, you didn't mention anything about a horizontal constraint.But the content does create new columns as specified when the vertical shrinks. — Sunny Patel, Jun 10 '19 at 18:29
"Is there a way to make the dialog tag grow to encompass the contents as they flow?" I need the dialog tag to grow, not the .country-selector-container — ABMagil, Jun 10 '19 at 18:31

Resizing an HTML dialog tag horizontally with contents that wrap?

2 Answers2