Interactivity

Resize

Utilities for sets whether an element is resizable, along with direction.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
resize	resize: both
resize-none	resize: none
resize-x	resize: horizontal
resize-y	resize: vertical

Usage

Resize both x and y directions.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur aperiam, ipsum aspernatur pariatur rerum doloremque porro quibusdam, vitae doloribus eaque corporis harum asperiores distinctio quam veniam nobis odit nisi inventore.

<div class="resize ... overflow-auto">
  ...
</div>

HTML

.dummy {
  @extend
    .resize,
    .overflow-auto;
}

SCSS

Resize both x only directions.

<div class="resize-x ... overflow-auto">
  ...
</div>

HTML

.dummy {
  @extend
    .resize-x,
    .overflow-auto;
}

SCSS

Resize both y only directions.

<div class="resize-y ... overflow-auto">
  ...
</div>

HTML

.dummy {
  .resize-y,
  .overflow-auto;
}

SCSS