考虑子元素的最大宽度扩展父元素的div

HTML代码：

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

CSS代码：

.parent {
  display: inline-block;
  border: 1px dashed black;
  padding: 10px;
  max-width: 300px;
  transition: max-width 0.5s;
  white-space: nowrap;
}
.child {
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
  background-color: #ccc;
  white-space: nowrap;
  max-width: 100px;
}

JS代码：

const parent = document.querySelector('.parent');
const children = parent.querySelectorAll('.child');
let maxWidth = 0; // 初始化

for (let i = 0; i < children.length; i++) {
  const childWidth = children[i].offsetWidth; // 获取子元素宽度
  if (childWidth > maxWidth) {
    maxWidth = childWidth; // 找到最宽的子元素
  }
}

parent.style.maxWidth = maxWidth + 'px'; // 将最大宽度设置为父元素的最终宽度

setTimeout(() => {
  parent.style.maxWidth = '500px'; // 测试时的扩展宽度
}, 2000);

在该示例中，父元素在扩展时考虑了子元素的最大宽度，并将其作为父元素的最终宽度。JS代码中使用offsetWidth获取子元素的实际宽度，如果比当前最大宽度还大则更新最大宽度。最后将父元素的最终宽度设置为最大宽度即可。