如何让下拉菜单子div匹配未设固定宽度的父div（无需JavaScript）

嘿，这个问题我之前也碰到过！核心原因是绝对定位的元素脱离了文档流，没法自动继承父元素的自适应宽度。不过不用慌，纯CSS就能搞定，不用JavaScript也不用固定宽度，看下面的方案：

问题根源 #

你的.select_checkbox用了position: absolute，它的父元素.multi_select是inline-block且width: auto，这时候width: inherit没法正确计算父元素的自适应宽度——因为绝对定位元素的宽度参照的是最近的非静态定位（也就是非position: static）的祖先元素，而你的.multi_select默认是静态定位，所以.select_checkbox其实是相对于整个文档或者其他上层容器计算宽度的。

解决方案步骤 #

• 给.multi_select添加position: relative，让它成为绝对定位子元素的参照容器。
• 把.select_checkbox的width: inherit改成width: 100%，这样它会占满父容器的宽度。
• 给.select_checkbox添加box-sizing: border-box，避免边框和内边距导致宽度溢出（默认的content-box会把边框算在宽度之外，100%+边框就会超出父元素）。

修改后的完整代码 #

.multi_select { 
  display: inline-block; 
  width: auto; 
  position: relative; /* 新增：让子元素的绝对定位以它为参照 */
}
.div_select { 
  font-size: 14px; 
  border: 1px solid black; 
  background-color: #EEE; 
  padding: 0px 5px 0px 3px; 
  cursor: pointer; 
}
.div_select::after { 
  font-family: FontAwesome; 
  content: "\f0d7"; 
  padding-left: 5px; 
  padding-right: 5px; 
}
.multi_select_cat:hover .select_checkbox, .multi_select_num:hover .select_checkbox{ 
  display: block; 
}
.select_checkbox { 
  position: absolute; 
  display: none; 
  background: #EEE; 
  border: 1px solid black; 
  border-top: 0px; 
  width: 100%; /* 替换inherit为100% */
  box-sizing: border-box; /* 新增：把边框算进宽度内 */
  left: 0; /* 可选：确保子元素左对齐父元素 */
}
.select_checkbox div { 
  display: block; 
  width: 100%; 
}
.select_checkbox div:hover { 
  cursor: pointer; 
  background-color: #F60; 
}
.select_checkbox_show { 
  display: block; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="multi_select multi_select_num">
  <div class="div_select noselect"> Numero elementi da mostrare </div>
  <div class="select_checkbox">
    <div>10</div>
    <div>20</div>
    <div>30</div>
  </div>
</div>

这样修改后，不管父元素.multi_select的内容宽度怎么变化，子元素.select_checkbox都会自动匹配它的宽度，而且不需要固定像素值或者JavaScript干预~

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