为什么我的<ul>走出他父母的<div>？ CSS问题

Question

我正在尝试使选项卡的标题具有响应性，但它​​（<li>）一直超出父级宽度。 从昨天开始我一直在寻找这段代码，但找不到解决方案。

请让我知道我的代码是否无法理解，或者是否可以做更多事情以使问题更易于理解，我对这些东西还是陌生的

/ \只能在最小宽度：768px / \

下使用

我清理了代码并制作了一段代码，以更好地理解：https://jsfiddle.net/Demky/j72cbg9L/

html（仅标签标题，有关完整代码，请参见jsfiddle）

      <div id="tabContainer" class="tabs">
        <div class="tab-button-outer">
          <ul id="tab-button" class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link" href="#tab02" data-toggle="tab">Title_date</a></li>
            <li class="nav-item active"><a class="nav-link active categoriesFont4" href="#tab01"
                data-toggle="tab">actualy actualyactualy text home home homehome  blue red anticonstitutionellement</a></li>
            <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
            <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
          </ul>
        </div>

CSS

#tabContainer {
  font-family: 'Open Sans', sans-serif;
}

/* ul { */
.tab-button-outer {
  display: flex; /* establish flex container */
  background-color: yellow;
}

/* li { */
  .nav-link {
    flex: 1;
    background-color: lightgreen;
    border: 1px dashed black;
    justify-content: center;
    align-items: center;
  }

#tab-button {
  /* Comment purpel to see the yellow */
  background-color: purple;
  display: table;
  table-layout: fixed;
  /* ! Here if 100% activated, the tab dont go outside of parent */
  /* But then the text go outside of his parent */
  /* width: 100%; */
}

#tab-button li {
  display: table-cell;
}

#tab-button li a {
  display: block;
  padding: 0.5em;
  background-color: #135f63;
  border: 1px solid #02494d;
  text-align: center;
  color: #000;
}

#tab-button li:not(:first-child) a {
  /* Border for all tabs but the first */
  border-left: none;
}

#tab-button li:not(.is-active) a:hover {
  /* Hover a tab not current */
  background-color: #27858A;
}

#tab-button .is-active a {
  /* No border if current tab ! */
  border-bottom-color: transparent;
  background-color: #27858A;
}

#tab-button .disabled {
  /* .nav-item .disabled { */
  /* Change opacity ! */
  opacity: 0.65;
  font-style: italic;
  filter: alpha(opacity=65);

  /* DEACTIVATE CLICk */
  pointer-events: none;
}

.tab-contents {
  padding: .5em 2em 1em;
  background-color: #27858A;
  margin-top: 20px;
  border: 1px solid #0d5a5e;
  border-radius: 0 0 10px 10px;
}

.nav-tabs {
  /* Bootstrap 4 default border-bottom white */
  /* border-bottom: transparent; */
  border-bottom: 0px;
}

.nav-tabs .nav-link {
  /* border-top-left-radius: 0.50rem; */
  /* border-top-right-radius: 0.50rem; */
  border-radius: 10px 10px 0 0;
}

@media screen and (min-width: 768px) {
  .tab-button-outer {
    position: relative;
    z-index: 2;
    display: block;
  }

  .tab-contents {
    position: relative;
    top: -1px;
    margin-top: 0;
  }
}

屏幕截图

我希望页眉（第一张图片-竖线区域）不会超出（第二张图片-黄色区域）

预期结果：

---

Futur：稍后，我将尝试使它们的高度相同（较高的高度），但我想先解决此问题