Scrolling only within an inner Stack

[jared-hunter]

Hello

I am having trouble getting the behavior i want

I have an outer stack that lists an input search field, then a list of results. When the results list is large i want to pin the search field at the top and only scroll the results but i can't seem to find a way to get scrolling to exclude the input field. Can you provide some guidance on the correct way to do this?

import * as React from "react";
import { render } from "react-dom";
import { Stack, Text, Input } from "@twilio-paste/core";
import { CustomizationProvider } from "@twilio-paste/core/customization";

function App() {
  return (
    <CustomizationProvider
      baseTheme="default"
      elements={{
        PARENT_STACK: {
          height: "100%"
        },
        INNER_STACK: {
          overflowY: "auto"
        }
      }}
    >
      <Stack element="PARENT_STACK" orientation="vertical" spacing="space0">
        <Input type="text" placeholder="Search" />
        <Stack element="INNER_STACK" orientation="vertical" spacing="space20">
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
          <Text as="div">Test</Text>
        </Stack>
      </Stack>
    </CustomizationProvider>
  );
}

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

https://codesandbox.io/s/9vbde7?file=/src/index.tsx

[TheSisb]

Hi @jhunter-twilio,

In order for an element to be scrollable it needs a height and overflow to be defined. Here's an updated Codesandbox showing how that works.