After creating three tabs out of divs and placing them along with a textbox into another div named "window", I wanted the window to encompass all of the content, have a red background, and a blue border around it. However, I encountered an issue where the tab divs seemed to be overflowing their parent div (window), causing the background and border to fill a smaller area than intended.
I attempted to fix this by setting overflow:hidden on the window, but this resulted in part of the tabs being cut off, which was not ideal. On the positive side, the border now surrounded the content perfectly, which was my desired outcome.
Alternatively, I tried setting overflow:auto on the window, but this led to the creation of a scroll bar that I did not want to appear.
Is there a solution to prevent the child elements from overflowing or to expand the window div to accommodate this overflow?
You can view the page I am working on 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>