html - 如何使元素与固定子元素的宽度一样宽？

Question

我有两个兄弟元素 (navBar 和 content)，其中最左边的元素 (navBar) 应该根据其子元素调整其宽度(菜单)。
但是，菜单 需要固定:它的宽度可以改变，因此内容元素也需要动态改变。

问题是，当菜单 固定后，它不再处于文档流中。发生这种情况时，navBar 的宽度会缩小，这会导致内容元素的宽度增加。

那么如何才能让 navBar 在不手动设置宽度的情况下识别其固定子元素的宽度？

.menu {
  position: fixed;
}

<div class="container">
  <div class="navBar">
    <div class="menu"></div>
  </div>
  <div class="content"></div>
</div>

Answer 1

也许固定定位并不是您真正需要的。 position:sticky 可能更适合您。

  .container {
  margin: 1em auto;
  border: 1px solid green;
  height: 2000px;
  display: flex;
}

.navbar {
  padding: 1em;
  margin-right: 1em;
  background: lightblue;
}

.navbar nav {
  background: pink;
  position: sticky;
  top: 1em;
}

.content {
  background: rebeccapurple;
  flex: 1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  list-style: none;

<div class="container">
  <div class="navbar">
    <nav>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 50000</li>
      </ul>
    </nav>
  </div>
  <div class="content"></div>
</div>