如何使MUI子下拉框填满table-cell类型的父元素？

以下是具体解决方法：

• 为table-cell元素的直接父容器添加样式：display: table; width: 100%;。table-cell元素必须处于table布局容器内，才能正确计算并占据可用宽度。
• 给子下拉框（select元素）设置：width: 100%; box-sizing: border-box;。默认的content-box盒模型会让元素宽度仅计算内容区域，加上边框和内边距后会超出父元素；border-box能让宽度包含内边距与边框，确保元素完全贴合父容器。
• 若table-cell元素存在默认内边距，需额外添加padding: 0;，消除内边距对下拉框宽度的挤压。

示例代码片段：

.table-container {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  padding: 0;
}

.table-cell select {
  width: 100%;
  box-sizing: border-box;
}

按上述方式设置后，下拉框即可完全填满table-cell的可用空间，解决尺寸不一致的问题。

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