javascript - 为什么当父元素的宽度改变时，子元素的宽度也会改变？

Question

我正在尝试创建一个最小宽度为 50 像素、最大宽度为 200 像素的工具提示元素。我将工具提示元素放在另一个元素中，这样当父元素上有悬停事件时，我可以轻松控制工具提示何时出现或消失。

我遇到的问题是工具提示元素的宽度似乎由父元素的宽度控制，即使我指定子元素(工具提示)具有绝对位置也是如此。

let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
  b = !b;
  let w = 10;
  if( b ) {
    w = 300;
  }
  p.style.width = `${w}px`
}, 5000 );

#parent {
  background-color: cyan;
  width: 100px;
  height: 25px;
  position: relative;
  transition: width 2s;
}

#tooltip {
  position: absolute;
  top: calc( 100% + 5px );
  left: 5px;
  min-width: 50px;
  max-width: 200px;
  background-color: yellow;
  padding: 5px;
  border: 1px solid black;
}

<div id="parent">
  <div id="tooltip">
    My long tooltip text that wraps to multiple lines as needed.
  </div>
</div>

在此示例中，我希望工具提示(黄色 div)的大小保持在 200px，但我们可以看到，当父级更改宽度时，工具提示宽度也会更改。为什么？

有没有办法解决这个问题？

澄清:在这个例子中:https://codepen.io/anon/pen/ePPWER我们看到工具提示文本在一行上看起来不错。我不希望工具提示的 div 在父级更改宽度时更改其宽度，因为它会强制工具提示文本换行到 2 行，这是不希望的。

Answer 1

如果我们检查相关的规范to the width of absolutely positioned element我们可以读到:

3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'

因此在您的情况下，您的元素的宽度会缩小以适合:

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, calculate the available width: this is found by solving for 'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

为了简单起见，在不考虑最小/最大宽度的情况下，元素的宽度将尝试适应内容而不超过其父容器(包含 block )的宽度。通过添加最小/最大宽度，您只需添加更多约束。

修复它的一个想法是从父元素中删除 positon:relative，这样它就不再是 position:absolute 元素的包含 block (it will be the initial containing block，其中足够宽以避免可用宽度约束)。

然后用margin代替top/left来控制位置:

let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
  b = !b;
  let w = 10;
  if( b ) {
    w = 300;
  }
  p.style.width = `${w}px`
}, 5000 );

#parent {
  background-color: cyan;
  width: 100px;
  height: 25px;
  transition: width 2s;
}

#tooltip {
  position: absolute;
  margin-top: 30px;
  min-width: 50px;
  max-width: 200px;
  background-color: yellow;
  padding: 5px;
  border: 1px solid black;
}

<div id="parent">
  <div id="tooltip">
    My long tooltip text that wraps to multiple lines as needed.
  </div>
</div>