如何设置div宽度适配最长未添加子元素以避免宽度跳动？

问题描述 #

有一个居中显示的外层div，内部嵌套的#originaldiv通过inline-block实现子元素左对齐。当向#original中添加比现有子元素更长的内容时，#original会因宽度扩展出现跳动，需要预先将其宽度设置为适配最长子元素的尺寸，避免这种现象。

原始代码 #

<div style='text-align: center;'>
  <div style='display: inline-block; text-align: left;' id='original'>
    <br> this is the first child
    <br> this is the second child
  </div>
</div>

<button onclick="appendChildToDiv('I am the longest child of them all');">
  Append long child
</button>

<script>
function appendChildToDiv(stringToAppend) {
  const originalDiv = document.getElementById(`original`);
  originalDiv.innerHTML += `<div id='rest'>${stringToAppend}</div>`;
}
</script>

解决思路 #

1. 提前计算最长内容宽度并设置min-width

如果能提前知晓所有可能的子元素内容，可以通过隐藏元素预先计算最长内容的宽度，然后将该宽度设置为#original的最小宽度，确保其初始宽度就能容纳最长内容，避免后续跳动。

示例代码：

<div style='text-align: center;'>
  <div style='display: inline-block; text-align: left;' id='original'>
    <div>this is the first child</div>
    <div>this is the second child</div>
  </div>
</div>

<button onclick="appendChildToDiv('I am the longest child of them all');">
  Append long child
</button>

<!-- 用于计算宽度的隐藏元素 -->
<div id="width-calc" style="visibility: hidden; position: absolute; white-space: nowrap;"></div>

<script>
// 定义所有可能出现的子元素内容
const allContents = [
  'this is the first child',
  'this is the second child',
  'I am the longest child of them all'
];

const calcElement = document.getElementById('width-calc');
let maxWidth = 0;

// 遍历内容计算最大宽度
allContents.forEach(content => {
  calcElement.textContent = content;
  const currentWidth = calcElement.offsetWidth;
  if (currentWidth > maxWidth) {
    maxWidth = currentWidth;
  }
});

// 给目标div设置最小宽度
document.getElementById('original').style.minWidth = `${maxWidth}px`;

function appendChildToDiv(stringToAppend) {
  const originalDiv = document.getElementById(`original`);
  originalDiv.innerHTML += `<div>${stringToAppend}</div>`;
}
</script>

2. 使用CSS max-content 设置宽度

现代浏览器支持width: max-content属性，该属性会让元素宽度自动适配内部最长内容的尺寸。直接给#original设置这个属性，就能让它初始就拥有容纳最长子元素的宽度（适用于初始内容已包含最长项的场景）。

修改后的样式：

#original {
  display: inline-block;
  text-align: left;
  width: max-content;
}

3. 动态计算当前最长子元素宽度

如果无法提前知晓所有内容，可以在页面初始化时计算#original内部现有子元素的最大宽度，设置为min-width。后续若添加的新元素宽度超过当前值，可根据需求选择更新min-width（仍会跳动）或限制新元素换行（添加white-space: nowrap）。

示例代码（初始化计算现有最长子元素宽度）：

<div style='text-align: center;'>
  <div style='display: inline-block; text-align: left;' id='original'>
    <div>this is the first child</div>
    <div>this is the second child</div>
  </div>
</div>

<button onclick="appendChildToDiv('I am the longest child of them all');">
  Append long child
</button>

<script>
// 初始化计算最长子元素宽度
function setMinWidth() {
  const originalDiv = document.getElementById('original');
  const children = originalDiv.querySelectorAll('div');
  let maxWidth = 0;
  
  children.forEach(child => {
    const width = child.offsetWidth;
    if (width > maxWidth) {
      maxWidth = width;
    }
  });
  
  originalDiv.style.minWidth = `${maxWidth}px`;
}

// 页面加载完成后执行
window.onload = setMinWidth;

function appendChildToDiv(stringToAppend) {
  const originalDiv = document.getElementById(`original`);
  originalDiv.innerHTML += `<div>${stringToAppend}</div>`;
}
</script>

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