Modal Content Resize — Adapt to User-Resized Modals

Modals That Aren't Just Tiny or Huge

When a modal is resizable (the user can drag a corner to expand/shrink it), its content must adapt smoothly. Container queries are perfect because the modal's container width changes independently of the viewport.

The CSS

.modal-host {
  container-type: inline-size;
  container-name: modal;
  resize: horizontal; /* user can drag the right edge */
  overflow: auto;
  min-width: 320px;
  max-width: 90vw;
}

.modal-body {
  display: block;
}

/* Two-pane layout when wide */
@container modal (min-width: 640px) {
  .modal-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

/* Three-pane layout when very wide */
@container modal (min-width: 960px) {
  .modal-body {
    grid-template-columns: 200px 1fr 220px;
  }
  .modal-aside-right { display: block; }
}

Real-World Example: File Picker

A file picker modal might show:

• <640px: just a file list
• 640-959px: file list + preview pane
• ≥960px: folder tree + file list + preview pane

As the user widens the modal, panels appear naturally. As they narrow it, panels collapse — without JS, without flicker.

Pair with min-height for Vertical Resize

If the modal is also vertically resizable, switch to container-type: size and add height-based queries:

.modal-host {
  container-type: size;
  resize: both;
  min-height: 240px;
}

@container modal (min-height: 500px) {
  .modal-aside-right { overflow-y: auto; max-height: 100%; }
}

Remember that container-type: size requires an explicit height on the host.

Animations on Resize

Container queries fire instantly during resize. Add transitions on the affected properties for smooth visual feedback:

.modal-body {
  transition: grid-template-columns 0.2s ease;
}