如何扩展父 div 以解决孩子的溢出问题？

Question

我从 div 中创建了三个选项卡，并将它们与一个文本框一起放入另一个名为 window 的 div 中。我希望窗口包含所有内容，有红色背景，周围有蓝色边框。问题是选项卡 div 似乎溢出了它们的父 div（窗口），导致背景和边框填充的区域小于应填充的区域。

我尝试在窗口上设置溢出：隐藏，这将我不想要的部分标签切掉，但是现在边框完全围绕着我想要的内容。

另外，我尝试在窗口上设置溢出：自动，但这会创建一个我不想要的滚动条。

有没有办法阻止子元素溢出或扩展窗口 div 以解决这种溢出？

您可以看到我正在尝试制作的页面here。

body {
  background-color: #F79F94;
  text-align: center;
}
.tab {
  background-color: #F47564;
  min-height: 50px;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
.tab-right-line {
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #F79F94;
}
.tab-text {
  color: white;
  font-size: 14pt;
  font-family: georgia;
}
#window {
  border-color: blue;
  border-style: solid;
  border-width: 1px;
  background-color: red;
  display: inline-block;
}

<div id="window">
  <div class="row">
    <div class="col-xs-4 tab tab-right-line">
      <h1 class="tab-text text-center">All</h1>
    </div>
    <div class="col-xs-4 tab tab-right-line">
      <h1 class="tab-text text-center">Online</h1>
    </div>
    <div class="col-xs-4 tab">
      <h1 class="tab-text text-center">Offline</h1>
    </div>
  </div>

  <br>

  <div class="row">
    <input type='text' class='form-control' required>
  </div>
</div>

Answer 1

改变这个：

<div id="window">

到这里：

<div class="container-fluid" id="window">

Here is the JSFiddle demo