Scroller

<VerticalLayout style={{ border: '1px solid var(--lumo-contrast-20pct)', height: '400px', width: '360px' }}>
  <header className={cn('flex', 'ml-m')}>
    <h2 className={cn('mt-s', 'mb-s')}>Edit employee</h2>
  </header>
  <Scroller scrollDirection='vertical' className='p-m'>
    <section aria-labelledby='personal-title'>
      <h3 className={cn('mt-s', 'mb-s')}>Personal information</h3>
      <TextField className='w-full' label='First name' />
      <TextField className='w-full' label='Last name' />
      <DatePicker initialPosition='1990-01-01' label='Birthdate' className='w-full' />
    </section>
    <section aria-labelledby='employment-title'>
      <h3 id='employment-title'>Employment information</h3>
      <TextField className='w-full' label='Position' />
      <TextArea className='w-full' label='Additional information' />
    </section>
  </Scroller>
  <footer className={cn('flex', 'ml-m')}>
    <Button theme='primary'>Save</Button>
    <Button theme='tertiary'>Reset</Button>
  </footer>
</VerticalLayout>