How to make an element be as wide as it's fixed child's width?

Question

I have two sibling elements (navBar & content) in which the leftmost element (navBar) should adjust its width based on its child (menu).
However, the menu needs to be fixed: its width can change, so therefore the content element needs to change dynamically as well.

The problem is that when the menu is fixed, it is no longer in document flow. When this happens the navBar shrinks in width, which causes the content element to grow in width.

So how exactly can I make the navBar recognize the width of its fixed child element without setting the width manually?

.menu {
  position: fixed;
}

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

Answer 1

Here is a solution adapted from Pauli_D using flexbox without any positioning for the navbar. Please note that the content container has an overflow: auto attribute to allow for scrolling.

* {
  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>

Answer 2

Perhaps fixed positioning isn't what you really need. position:sticky might be more what you are after.

  .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>