GC Design SystemCSS Shortcuts
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Overflow

The overflow class sets the overflow property. It controls how content is handled when it does not fit in its container and overflows. Overview
CSS Shortcut class Applied style 
overflow-visible
 
overflow: visible;
 
overflow-x-visible
 
overflow-x: visible;
 
overflow-y-visible
 
overflow-y: visible;
 
overflow-hidden
 
overflow: hidden;
 
overflow-x-hidden
 
overflow-x: hidden;
 
overflow-y-hidden
 
overflow-y: hidden;
 
overflow-scroll
 
overflow: scroll;
 
overflow-x-scroll
 
overflow-x: scroll;
 
overflow-y-scroll
 
overflow-y: scroll;

Examples

Visible
overflow-visible

Content that doesn’t fit in this element overflows horizontally and vertically. 
<div class="overflow-visible">
  Content that doesn’t fit in this element overflows
  horizontally and vertically.
</div>

Visible horizontal (x)
overflow-x-visible

Content that doesn’t fit in this element overflows horizontally. 

<div class="overflow-x-visible" style="width: 250px">
  <p style="width: 500px">
    Content that doesn’t fit in this element overflows
    horizontally.
  </p>
</div>

Visible vertical (y)
overflow-y-visible

Content that doesn’t fit in this element overflows vertically. 
<div class="overflow-y-visible">
  Content that doesn’t fit in this element overflows
  vertically.
</div>

Hidden
overflow-hidden

Content that doesn’t fit in this element is invisible, but still exists for screenreaders. 

<p class="overflow-hidden">
  Content that doesn’t fit in this element is invisible, but
  still exists for screenreaders.
</p>

Hidden horizontal (x)
overflow-x-hidden

Content that doesn’t fit to the left and right of this element is invisible, but still exists for screenreaders. 

<div class="overflow-x-hidden" style="width: 250px">
  <p style="width: 500px">
    Content that doesn’t fit to the left and right of this
    element is invisible, but still exists for
    screenreaders.
  </p>
</div>

Hidden vertical (y)
overflow-y-hidden

Content that doesn’t fit above or below this element is invisible, but still exists for screenreaders. 

<p class="overflow-y-hidden">
  Content that doesn’t fit above or below this element is
  invisible, but still exists for screenreaders.
</p>

Scroll
overflow-scroll

Content that doesn’t fit in this element can be scrolled to with vertical and horizontal scrollbars. 
<a href="#" class="overflow-scroll">
  Content that doesn’t fit in this element can be scrolled
  to with vertical and horizontal scrollbars.
</a>

Scroll horizontal (x)
overflow-x-scroll

Content that doesn’t fit in this element can be scrolled to with a horizontal scrollbar. 

<a href="#" class="overflow-x-scroll" style="width: 250px">
  <p style="width: 500px">
    Content that doesn’t fit in this element can be scrolled
    to with a horizontal scrollbar.
  </p>
</a>

Scroll vertical (y)
overflow-y-scroll

Content that doesn’t fit in this element can be scrolled to with a vertical scrollbar. 
<a href="#" class="overflow-y-scroll">
  Content that doesn’t fit in this element can be scrolled
  to with a vertical scrollbar.
</a>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:overflow-hidden ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01