Determining how Flexboxes are to handle overflow

Depending on how you have defined a Flexbox, it is possible that the content within that Flexbox can "overflow" the available space. This is especially true when the width or height of the Flexbox is defined by pixels. When this happens you have three options for how to handle the overflow content: by hiding it, by wrapping it, or by allowing it to scroll.

To determine how Flexboxes are to handle overflow of content, use this procedure:

  1. Select the Flexbox in the workspace.
  2. In the component Properties panel, select the Style tab.
  3. In the list of Style settings, locate the Overflow option and click Show More.
  4. From the drop-down list, select the overflow option you want:
    • Hidden (the default setting) - "Hides" the overflow content so that it does not display at all.
    • Wrap - Allows the overflow content to "wrap" so that it fits within the available space and no content is hidden.
    • Scroll - "Hides" the overflow content, but adds a scrollbar, so you can "scroll" to view the overflow content.