In Instant, you can control an element's width and height using four sizing options:
Fixed
Relative to its container
Fit to content
Fill available space
View - Viewport-based (vh / vw)
You set width and height separately, giving you full control over how each element behaves.
Fixed
When you set an element's size to Fixed, you define its exact dimensions in pixels (e.g., 200px wide or 300px tall). The element stays that size, even if its content or container changes.
Relative
With Relative sizing, an element’s width or height is set as a percentage of its container's size.
A width of 50% means the element will take up half the width of its container.
A height of 75% means it will use three-quarters of the container's height.
Fit
When set to Fit, the element automatically adjusts its size to match the content and spacing inside it.
Example:
If an element contains only an image that is 200px wide, and has no added spacing, its width will also be 200px.
If you add 50px of horizontal spacing on both sides, the element's total width becomes:
200px (image) + 2 × 50px (spacing) = 300px
Fill
Setting an element to Fill makes it expand to use all the available space in its container.
If multiple elements in the same container are set to Fill, they’ll share the available space equally (or according to any set ratios).
Viewport-Based Sizing (vh / vw)
Use Viewport Height (vh) and Viewport Width (vw) to size elements based on the dimensions of the browser window.
View set to 1 = 1% of the width or height of the viewport
Examples:
Height: 100 view makes an element fill the entire height of the screen.
Width: 50 view means the element spans half the screen width, regardless of the container.
This is ideal for full-screen sections, hero banners, or responsive elements tied to the user’s screen size.
Handling Overflow
Sometimes, content may be too large for its container. You can control what happens using the Overflow setting:
Show: Content that overflows the container remains visible.
Hide: Only the content inside the container’s boundaries is shown. Overflowing parts are hidden.
Scroll: A scrollbar appears if the content exceeds the container’s size.
Tip: If Wrap is enabled in the Layout section, scrollbars will only appear in one direction. This is because Wrap prevents overflow in the main layout direction.