如何使元素的宽度等于固定孩子的宽度？

Question

我有两个同级元素（ navBar 和 content ），其中最左边的元素（ navBar ）应根据其子元素调整其宽度（ menu ）。
但是，菜单需要固定：其宽度可以更改，因此content元素也需要动态更改。

问题在于，修复菜单后，该文件将不再处于文档流中。发生这种情况时， navBar 的宽度会缩小，这会导致content元素的宽度增大。

那么我如何准确地使 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>

Answer 2

这里是使用flexbox改编自Pauli_D的解决方案，而导航栏没有任何位置。请注意，content容器具有overflow: auto属性以允许滚动。

* {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
}

.navbar {
  padding: 1em;
  background: lightgrey;
  flex: 1 1 auto;
}

.navbar li {
  white-space: nowrap;
}

.content {
  background: lightblue;
  flex: 1 1 auto;
  overflow: auto;
  padding: 1em;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<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">
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut elementum metus. Nam odio tellus, eleifend eget felis et, facilisis commodo erat. Mauris euismod diam ipsum, nec dapibus risus rhoncus ac. Aliquam consectetur velit vel nisl efficitur elementum. Morbi mattis sapien id sagittis aliquam. Praesent porttitor ex velit, eu suscipit magna iaculis mattis. Quisque tristique, neque vitae dictum imperdiet, tellus tellus volutpat diam, ut vulputate velit magna a metus. Phasellus id libero ipsum. Morbi nec lacinia enim. Nulla placerat egestas ipsum sit amet porttitor. Nunc ipsum magna, ultrices et suscipit ut, ullamcorper sit amet dui. Donec in nunc blandit, accumsan mi non, porta magna.<br/><br/>

Vivamus varius eu metus a posuere. Donec efficitur ligula non risus ultrices, at faucibus turpis congue. Etiam eget risus sit amet neque dapibus sodales sed quis justo. Nullam molestie felis in urna dapibus, eget tempor nisl ornare. Curabitur suscipit lorem eu nisi lobortis condimentum. Phasellus in nisi id lacus scelerisque rhoncus a sed nunc. Mauris dapibus ullamcorper pellentesque. Mauris id elit in est mollis egestas vulputate tristique est. Fusce vel urna sapien. Ut rutrum condimentum quam, non rutrum quam tincidunt eget. Praesent mattis turpis id eros efficitur, non aliquam ligula sagittis.<br/><br/>

Mauris lacus mauris, lacinia eu tempor eget, porta id odio. Nulla imperdiet et nulla sed malesuada. Praesent vehicula, ligula eget posuere varius, ex lorem lacinia ante, ut egestas urna nunc eget mauris. Vivamus malesuada est sit amet libero laoreet lacinia. Nulla blandit leo sed velit egestas, eu molestie lectus venenatis. Mauris semper sapien ac lorem pretium, id dapibus leo molestie. Donec sem ante, egestas sed dignissim eget, dapibus vitae elit. Suspendisse potenti. Aenean dictum laoreet tellus, id blandit eros interdum id.
  </div>
</div>