MUI Box组件设置height:100%后超出Grid高度如何解决？

这个问题根源是fieldset元素自带默认的内边距（padding）和边框（border），你设置的height:100%只计算内容高度，加上默认的padding和border后，整体高度就会超出父容器。给你几个实用方案：

1. 统一盒模型（推荐）
   在Box的sx属性里加boxSizing: 'border-box'，让padding和border都包含在100%高度内：

   <Box component="fieldset" sx={{borderRadius:2, height:"100%", boxSizing: 'border-box'}}>
   

2. 清除fieldset默认内边距
   如果不需要默认内边距，直接清零：

   <Box component="fieldset" sx={{borderRadius:2, height:"100%", padding: 0}}>
   

3. 换用div作为Box组件
   要是不需要fieldset的语义化，换成div就行，它没有默认的padding和border：

   <Box component="div" sx={{borderRadius:2, height:"100%", border: '1px solid #ccc'}}>
   

另外还要确保Grid容器本身有明确高度，比如给外层Grid加height: '100vh'，这样高度才能正确传递到子元素：

<Grid container sx={{height: '100vh'}}>

内容的提问来源于stack exchange，提问作者LosProgramer