如何使用%设置溢出高度

Question

我在这里有一个代码，试图溢出SearchLocationCards。它适用于"px"one_answers"vh"值，但是，当我尝试使用"%"值时，它根本不起作用。如何使用%height值调整可滚动框的大小？

<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>

但是，如果不知道父组件相对于这个组件的高度，就不能保证它会起作用。关键是，您需要跟踪树，直到找到限制大小的标记。