我有一個(gè)頁(yè)面顯示多個(gè)像這樣的div。但是，我想將它分布在四列中，這樣它就不會(huì)溢出我的當(dāng)前頁(yè)面。然而，這些div的高度會(huì)因內(nèi)容而異，如屏幕截圖所示。

考慮到div的高度可能會(huì)隨著標(biāo)題標(biāo)題下內(nèi)容的變化而變化，我該如何動(dòng)態(tài)地做到這一點(diǎn)呢？下面的代碼可能會(huì)給出更多的上下文

export default function Economic() {
  const [titles, setTitles] = React.useState<FredParentNodeDTO>([]);

  React.useEffect(() => {
    getFredParentNodes().then((res) => setTitles(res.data))
}, [])

  return (
    <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
      {
        titles.map((entry) => {
          return (
            <div style={{ width: '25%' }}>
              <S.FredRow 
                isTitle 
                key={`${entry.parent_node.name}_FredParentRow`}
              >
                {entry.parent_node.name}
              </S.FredRow>
              {entry.child_node.map((entry) => <S.FredRow>{entry.name}</S.FredRow>)}
            </div>
          )
        })
      }
    </div>
  )
}

interface FredRowProps {
    isTitle?: boolean;
    children?: any;
    [x: string]: any;
} 

export const FredRow = (props: FredRowProps) => {
    return (
        <BaseFredRow {...props}>
            <Typography variant={props.isTitle ? "body1" : "subtitle2"} >
                {props.isTitle ? <strong> {props.children} </strong> : props.children}
            </Typography>
        </BaseFredRow>
    )
}

const BaseFredRow = styled('div')<FredRowProps>(({ theme, title }) => ({
    padding: theme.spacing(0.5),
}));