Looks great in designer - not in CodePen...

[ajoslin103]

Expected Behavior

edit: here's the published design: https://designer.grommet.io/deny?id=Demo-1-allen-joslin-gmail-com

I expect the display to be the same in my usage as it worked in the Designer tool -- screenshot of the Designer Tool included in this issue

Actual Behavior

The items pinned to the bottom in the Designer did not pin in my usage or the codesandbox (which I can't figure out how to share, so I am pasting the code copied from the codesandbox here below

URL, screen shot, or Codepen exhibiting the issue

import React, { Component } from "react";
import { render } from "react-dom";

import { grommet, Box, Heading, Grommet, Text, TextInput } from "grommet";

class App extends Component {
  render() {
    return (
      <Grommet theme={grommet}>
        <Box
          fill="vertical"
          overflow="auto"
          align="center"
          flex="grow"
          direction="column"
          justify="between"
        >
          <Box align="center" justify="center" gap="medium">
            <Box align="center" justify="start">
              <Box align="center" justify="center">
                <Heading>My Demo</Heading>
              </Box>
              <Box align="center" justify="center">
                <Text>Share this demo code with</Text>
                <Text>someone else to begin</Text>
              </Box>
            </Box>
            <Box align="center" justify="start" gap="large">
              <Box align="center" justify="center" gap="small">
                <Text weight="bold">Your Demo Code: 232323</Text>
                <Text>Or Enter Their Demo Code:</Text>
                <TextInput placeholder="their demo code" />
              </Box>
              <Box align="center" justify="center">
                <Text weight="bold">Or To Join via QR Code:</Text>
                <Box align="center" justify="center" />
              </Box>
            </Box>
          </Box>
          <Box align="center" justify="end" gap="small">
            <Text
              textAlign="center"
              size="small"
              margin={{ left: "medium", right: "medium" }}
            >
              This demo will walk two people through a \ session in which the
              Business requests the status of a Customer.
            </Text>
            <Text
              textAlign="center"
              size="small"
              margin={{ left: "medium", right: "medium" }}
            >
              When two people are connected to this demo it will proceed to role
              selection.
            </Text>
          </Box>
        </Box>
      </Grommet>
    );
  }
}

render(<App />, document.getElementById("root"));

[ajoslin103]

By using <Grommet full={true} /> I am now able to get the behavior I want.

It is as yet unclear how this is done otherwise...