Как я могу настроить высоту перелива с помощью%?

Question

У меня есть код, я пытаюсь переполнить SearchLocationCards. Он работает со значениями «px» и «vh», однако, когда я пытаюсь использовать значение «%», он вообще не работает. Как изменить размер прокручиваемого поля со значениями высоты в%?

<div className={{ maxHeight: '100%' }}>
  <SearchDrawer />
  <div style={{ overflow: 'auto', height: '85vh' }}>
    <SearchedLocationCards
      searchedLocations={props.searchedLocation.results}
    />
  </div>
  <Paginated
    align='center'
    justify='center'
    direction='column'
    totalPage={100}
  />
</div>

Answer 1

Вы устанавливаете div maxHeight на «100%», который будет расти до той же высоты, что и дочерний элемент. Попробуйте установить высоту div на «100%» или другое фиксированное значение, и тогда вы сможете использовать% для высоты в дочернем div.

Если% не работает в дочернем компоненте, это всегда потому, что родитель не такой большой, как вы думаете.

Вы можете попробовать:

<div className={{ height: '100%' }}>
  // Child tags
</div>

или:

<div className={{ height: '100vh' }}>
  // Child tags
</div>

, но не зная высоту родителя компонент к этому, нет никакой гарантии, что он будет работать. Дело в том, что вам нужно проследить дерево, пока не найдете, какой тег ограничивает размер.