# 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>
```