# Providers::Dimension
A provider component that helps you to make a container fill the remaining space of the viewport.
Usually, you would **use flexbox** to do so but for scenarios where this isn't possible you
can use this component to make it easy to take up the remaining space.
```hbs
<Providers::Dimension as |p|>
<div style={{p.data.fillRemainingHeightStyle}}>
Fill remaining space
</div>
</Providers::Dimension>
```
By default, this component will take up the remaining viewport space by taking the
top of itself as the top-boundary and the `footer[role="contentinfo"]` as the
bottom-boundary. In terms of Consul-UI this means _take up the entire space but
stop at the footer that holds the consul version info at the bottom of the screen_.
You can pass a different `bottomBoundary` if need be:
```hbs preview-template
<div class='h-48 relative flex border border-hds-consul-foreground'>
<div class='h-full w-24 relative'>
<div
class='absolute bottom-0 w-full h-12 bg-hds-consul-gradient-primary-start flex items-center justify-center'
id='bottom-boundary'
>
Boundary
</div>
</div>
<div class='flex-1'>
<Providers::Dimension @bottomBoundary='#bottom-boundary' as |p|>
<div
style={{p.data.fillRemainingHeightStyle}}
class='bg-hds-consul-surface flex items-center justify-center'
>
We could use flexbox here instead
</div>
</Providers::Dimension>
</div>
</div>
```
db4b38c36e