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

Question

I created three tabs out of divs and put them along with a textbox into another div called window. I want window to encompass all of the content, have red background, and a blue border around it. The problem is that the tab divs appear to be overflowing their parent div (window) causing the background and border to fill a smaller area than should be filled.

I tried setting overflow:hidden on the window and this chopped off part of the tabs which I didn't want, however the border now went exactly around the content which is what I did want.

Also, I tried setting overflow:auto on the window, but this created a scroll bar which I don't want.

Is there a way to stop the child elements from overflowing or expand the window div to account for this overflow?

You can see the page I am trying to make 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

Change this:

<div id="window">

to this:

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

Here is the JSFiddle demo