Why my child container is over lapping on main container

Question

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>

tacoshy · Accepted Answer · 2022-03-01T10:33:22.910

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>

Why my child container is over lapping on main container

1 Answers1