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

Question

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

我尝试在 window 上设置 overflow:hidden，这切掉了我不想要的部分选项卡，但是现在边框正好围绕着我想要的内容.

此外，我尝试在 window 上设置 overflow:auto，但这创建了一个我不想要的滚动条。

有没有办法阻止子元素溢出或扩展 window 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

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

How to expand parent div to account for child's overflow?

html

css

expand

parent