Я создал три вкладки из div и поместил их вместе с текстовым полем в другое окно с названием div. Я хочу, чтобы окно охватывало весь контент, имел красный фон и синюю рамку вокруг него. Проблема заключается в том, что div div tab переполняют родительский div (окно), заставляя фон и границу заполнять меньшую область, чем нужно заполнять.Как расширить родительский div на учет для переполнения ребенка?
Я пробовал настройку переполнения: скрытый в окне, и это отрубило часть вкладок, которые мне не нужны, однако рамка теперь прошла точно по содержимому, которое я хотел.
Кроме того, я попытался установить переполнение: auto в окне, но это создало полосу прокрутки, которую я не хочу.
Есть ли способ остановить дочерние элементы от переполнения или развернуть окно 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>