使用子元素设置父元素的宽度

Question

我面临的挑战看似简单，但却使我无法入睡。 这是我要实现的目标：

1. .toc使父级变为全角，按预期方式工作
2. .menu有一个狭窄的父母，按预期工作
3. .searchbar需要全角父级，不起作用

如何解决我的搜索栏问题？

我的小提琴在这里： https : //jsfiddle.net/afz7qth3/1/

<button data-target="search">search</button>
<button data-target="toc">toc</button>
<button data-target="menu">menu</button>

<div class="site-header">
  <nav class="container">
      <div class="content search">
        <div class="searchbar">
          search
        </div>
      </div>

      <div class="content toc">
        Lot of Lorem ipsum [...] elit.
      </div>

      <div class="content menu">
        <ul>
          <li>I am</li>
          <li>a narrow</li>
          <li>width menu</li>
        </ul>
      </div> 
   </nav>
 </div>

.site-header {
  width: 100%;
}

.container {
  border: 2px dotted black;
  display: table;
}

.content { display: none; }
.content.search { display: table-cell; }

.searchbar {
  width: 100%;
}

.content div使用JS切换。

我在这里检查了如何使div填充剩余的水平空间？ 这里CSS填充剩余宽度，这里两个div并排-流体显示没有帮助。

谢谢，