html - 用子元素设置父元素的宽度

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%;
}

div用.contentJS 切换。

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

谢谢，

标签： htmlcss