如何让超出 div 界面的内容显示滚动条
有一个这样的子组件：
import react from 'react' export type itemtype = { type: "property" | "method", value: string, selected?: boolean } export type subcontainerprops = { height?: number, title: string, data: itemtype[], // 这个是items } export default function subcontainer (props: subcontainerprops){ return ( <div style={{borderradius: '8px', border: '2px dashed #333', height: props.height}}> <div style={{textalign: 'left'}}> <label>{props.title}</label> </div> <div> {props.data.map((item, index) => ( <div key={`${index}-${item.type}-${item.value} `} style={{ float: 'left', display: 'inline-block', borderradius: '6px', border: '2px solid #000', margin: '8px', padding:'4px', backgroundcolor: item.selected ? '#39fe40': '' }} >{item.value}</div> ))} </div> </div> ) }
但当 props.data 中的内容较多时，会超出界面的显示范围。要解决这个问题，可以在该 div 中添加以下样式：
overflow: 'auto'
修改后的代码如下：
return ( <div style={{borderRadius: '8px', border: '2px dashed #333', height: props.height, overflow: 'auto'}}> <div style={{textAlign: 'left'}}> <label>{props.title}</label> </div> <div> {props.data.map((item, index) => ( <div key={`${index}-${item.type}-${item.value} `} style={{ float: 'left', display: 'inline-block', borderRadius: '6px', border: '2px solid #000', margin: '8px', padding:'4px', backgroundColor: item.selected ? '#39fe40': '' }} >{item.value}</div> ))} </div> </div> )
这样，当内容超出界面范围时，就会出现滚动条，以便上下拖动进行查看。
