Min Height

Use minH prop to control the min-height of an element.

A flex item doesn’t shrink below its content by default. When a scrolling list sits inside a flex column that fills a fixed-height parent, set minH="0" on that column so it stays within the parent and the list scrolls. minH="auto" restores the default.

#
Documentation

#
Usage

Assets

Asset 1

Asset 2

Asset 3

Asset 4

Asset 5

Asset 6

Asset 7

Asset 8

Asset 9

Asset 10

Asset 11

Asset 12

Asset 13

Asset 14

Asset 15

Asset 16

Asset 17

Asset 18

Asset 19

Asset 20


import { Box, Flex, Heading, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex border="1" gap="8" h="224" p="16" rounded="md" w="224">
      <Heading level="4">Assets</Heading>
      <Flex flex="1" minH="0">
        <Box aria-label="Assets" overflow="auto" role="region" tabIndex={0}>
          {Array.from({ length: 20 }, (_, i) => (
            <Text key={i} py="4">
              Asset {i + 1}
            </Text>
          ))}
        </Box>
      </Flex>
    </Flex>
  );
}

Min Height

#Documentation

#Usage

Assets

#
Documentation

#
Usage