Why my child container is over lapping on main container [duplicate] - html

Question

This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 12 months ago.
Can anyone tell me how to solve this problem, As you can see my .tab
class is set to 100% width and it's overlapping on the
.main-container class? I also use overflow on my main container
however it began having a scroll can any tell me what is the correct
way to solve this problem? Thank you
.main-container {
border: 1px solid #D8D8D8;
border-radius: 2px;
width: 99%;
margin: 0 auto;
min-height: 10px;
/* overflow: auto; */
margin-top: 3px;
background: blue;
padding: 10px;
}
.tabs {
position: relative;
padding: 10px;
display: inline-block;
background-color: #f2f7fd;
border-radius: 6px;
width: 100%;
border: 1px solid transparent;
color: #333333;
}
.tabs-title {
margin-bottom: 6px;
font-size: 18px;
font-weight: 600;
color: #000000;
line-height: 22px;
padding: 0 2px;
}
.tabs-subtitle {
margin-bottom: 15px;
position: relative;
padding: 0 4px;
line-height: 18px;
}
.tabs-subtitle+hr {
height: 1px;
border: none;
background-color: #7a8a9a;
display: block;
margin-bottom: 15px;
}
.tabs-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.tabs-rdb {
display: none;
order: 1;
}
.tabs-lbl {
position: relative;
top: 0;
padding: 8px 14px;
padding-bottom: 10px;
cursor: pointer;
background-color: transparent;
display: inline-block;
border-radius: 6px 6px 0 0;
font-size: 13px;
order: 2;
font-weight: normal;
user-select: none;
color: #000000;
}
.tabs.tabs-lbl-bold .tabs-lbl {
font-weight: bold;
}
.tabs-rdb+.tabs-lbl:before {
content: '';
position: absolute;
width: 0;
height: 1px;
border: 6px;
background-color: #2575c4;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
transition: .32s ease width;
opacity: 0;
}
.tabs.tabs-lbl-bold .tabs-rdb+.tabs-lbl:before {
height: 2px;
}
.tabs-lbl:hover {
color: #2575c4;
}
.tabs-lbl:first-of-type {
margin-left: 16px;
}
.tabs-lbl:last-of-type {
margin-right: 16px;
}
.tabs-rdb:checked+.tabs-lbl {
background-color: #ffffff;
color: #2575c4;
box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.tabs-rdb:checked+.tabs-lbl+.tabs-text {
display: block;
}
.tabs-rdb:checked+.tabs-lbl:before {
width: 32%;
opacity: 1;
}
.tabs-text {
display: none;
top: 0;
order: 999;
padding: 10px;
background-color: #ffffff;
border-radius: 6px;
line-height: 18px;
box-shadow: 0 0px 8px -4px rgba(0, 0, 0, .24);
width: 100%;
z-index: 1;
min-height: 38px;
}
<div class="main-container">
<div class="tabs tabs-lbl-bold">
<div class="tabs-title">Main Title (Optional)</div>
<div class="tabs-subtitle">Subtitle Lorem ipsum dolor at met (Optional).</div>
<hr>
<div class="tabs-content">
<input id="nkTabs_a_1" type="radio" class="tabs-rdb" checked name="tabs-a">
<label for="nkTabs_a_1" class="tabs-lbl">Home</label>
<div class="tabs-text">This area is for Home tab.</div>
<!-- -->
<input id="nkTabs_a_2" type="radio" class="tabs-rdb" name="tabs-a">
<label for="nkTabs_a_2" class="tabs-lbl">About</label>
<div class="tabs-text">
This area is for About tab. This area is for About tab. This area is for About tab. This area is for About tab. This area is for About tab.
</div>
<!-- -->
<input id="nkTabs_a_3" type="radio" class="tabs-rdb" name="tabs-a">
<label for="nkTabs_a_3" class="tabs-lbl">Help</label>
<div class="tabs-text">This area is for Help tab. This area is for Help tab.</div>
</div>
</div>
</div>

Answer 1

This overflow is caused by the box-sizing. Just add .tabs { box-sizing: border-box; } and the issue should be fixed.
The default value of box-sizing: content-box does not include the paddings and border. As such 100% width of the parent + paddings and border will always overflow! As such you have an overflow by 22px without border-box
PS: To stop the horizontal overflow of the viewport you should use width: auto instead of width: 99% on the wrapping parent element.
.tabs {
box-sizing: border-box;
}
/* original CSS */
.main-container {
border: 1px solid #D8D8D8;
border-radius: 2px;
width: 99%;
margin: 0 auto;
min-height: 10px;
/* overflow: auto; */
margin-top: 3px;
background: blue;
padding: 10px;
}
.tabs {
position: relative;
padding: 10px;
display: inline-block;
background-color: #f2f7fd;
border-radius: 6px;
width: 100%;
border: 1px solid transparent;
color: #333333;
}
.tabs-title {
margin-bottom: 6px;
font-size: 18px;
font-weight: 600;
color: #000000;
line-height: 22px;
padding: 0 2px;
}
.tabs-subtitle {
margin-bottom: 15px;
position: relative;
padding: 0 4px;
line-height: 18px;
}
.tabs-subtitle+hr {
height: 1px;
border: none;
background-color: #7a8a9a;
display: block;
margin-bottom: 15px;
}
.tabs-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.tabs-rdb {
display: none;
order: 1;
}
.tabs-lbl {
position: relative;
top: 0;
padding: 8px 14px;
padding-bottom: 10px;
cursor: pointer;
background-color: transparent;
display: inline-block;
border-radius: 6px 6px 0 0;
font-size: 13px;
order: 2;
font-weight: normal;
user-select: none;
color: #000000;
}
.tabs.tabs-lbl-bold .tabs-lbl {
font-weight: bold;
}
.tabs-rdb+.tabs-lbl:before {
content: '';
position: absolute;
width: 0;
height: 1px;
border: 6px;
background-color: #2575c4;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
transition: .32s ease width;
opacity: 0;
}
.tabs.tabs-lbl-bold .tabs-rdb+.tabs-lbl:before {
height: 2px;
}
.tabs-lbl:hover {
color: #2575c4;
}
.tabs-lbl:first-of-type {
margin-left: 16px;
}
.tabs-lbl:last-of-type {
margin-right: 16px;
}
.tabs-rdb:checked+.tabs-lbl {
background-color: #ffffff;
color: #2575c4;
box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.tabs-rdb:checked+.tabs-lbl+.tabs-text {
display: block;
}
.tabs-rdb:checked+.tabs-lbl:before {
width: 32%;
opacity: 1;
}
.tabs-text {
display: none;
top: 0;
order: 999;
padding: 10px;
background-color: #ffffff;
border-radius: 6px;
line-height: 18px;
box-shadow: 0 0px 8px -4px rgba(0, 0, 0, .24);
width: 100%;
z-index: 1;
min-height: 38px;
}
<div class="main-container">
<div class="tabs tabs-lbl-bold">
<div class="tabs-title">Main Title (Optional)</div>
<div class="tabs-subtitle">Subtitle Lorem ipsum dolor at met (Optional).</div>
<hr>
<div class="tabs-content">
<input id="nkTabs_a_1" type="radio" class="tabs-rdb" checked name="tabs-a">
<label for="nkTabs_a_1" class="tabs-lbl">Home</label>
<div class="tabs-text">This area is for Home tab.</div>
<!-- -->
<input id="nkTabs_a_2" type="radio" class="tabs-rdb" name="tabs-a">
<label for="nkTabs_a_2" class="tabs-lbl">About</label>
<div class="tabs-text">
This area is for About tab. This area is for About tab. This area is for About tab. This area is for About tab. This area is for About tab.
</div>
<!-- -->
<input id="nkTabs_a_3" type="radio" class="tabs-rdb" name="tabs-a">
<label for="nkTabs_a_3" class="tabs-lbl">Help</label>
<div class="tabs-text">This area is for Help tab. This area is for Help tab.</div>
</div>
</div>
</div>