绝对子级不会拉伸到绝对父级内的内容大小

Question

有类似的问题，但没有一个对我有帮助。

我有两个 div。一个子项（一个菜单）和一个父项（浮动条）。他们都是绝对定位的。

场景是，这是一个动态显示在屏幕不同部分的浮动条，它必须堆叠在其他所有内容之上，因此为什么给父级赋予绝对位置。

子元素是一个菜单列表，它也应该出现在所有其他元素的顶部，使其大小适合其内容，并在您将鼠标悬停在其兄弟元素上时出现，即浮动工具栏上的一个按钮。

.floating-bar {
  position: absolute;
  z-index: 1;
  background-color: lightblue;
  height: 50px;
  padding: 5px;
}

.button-menu {
  max-width: 200px;
  background-color: yellow;
  padding: 10px;
  position: absolute;
  z-index: 2;
  display: none;
}

.button {
  background-color: blue;
  color: white;
  width: 35px;
  height: 50px;
}

.button:hover + .button-menu {
    display: block;
}

<div class="floating-bar">
    <div class="button">
      A
    </div>
    <div class="button-menu">
      <ul>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
      </ul>
    </div>
</div>

现在我的问题是子元素“button-menu”的内容没有延伸到它的内容，因为它是绝对父元素。但我无法从父级移除该定位。

还有其他解决方案可以实现我想要的一切吗？

要求：

1. 需要能够将父级“浮动栏”定位在屏幕上的任何位置，并且应该放在其他所有内容的顶部。

2. 孩子，“按钮菜单”也应该出现在所有内容的顶部，将自己定位到“按钮”的底部，内容应该拉伸到其最大宽度 200 像素；

Answer 1

您可以使用样式width:max-content 来获得所需的容器全宽。

.floating-bar {
  position: absolute;
  z-index: 1;
  background-color: lightblue;
  height: 50px;
  padding: 5px;
}
.button-menu {
  max-width: 200px;
  background-color: yellow;
  padding: 10px;
  position: absolute;
  z-index: 2;
  display: none;
  width: max-content;
  width: -moz-max-content;
}
.button {
  background-color: blue;
  color: white;
  width: 35px;
  height: 50px;
}
.button:hover + .button-menu {
    display: block;
}

<div class="floating-bar">
    <div class="button">A</div>
    <div class="button-menu">
      <ul>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
      </ul>
    </div>
</div>