title: Scroll bar doesn't scroll all the way to the bottom of my table
body: <p>I have a table that displays data, and it scrolls to see the rest of the data within the table.  The issue is that I am unable to reach the bottom of the table while scrolling.  This code is existing code from the previous developers and I'm trying to understand what is stopping it from scrolling to the bottom considering I don't know a whole lot about CSS.  Any help would be appreciated, thanks.  </p>
  
  <p>When I remove the first div the scrolling works fine, but the issue is that there are three other tables within the same page, and they display depending on which button was clicked so I need to keep that div there.</p>
  
  <p>Note: this.RenderBody() returns an array of elements.  There are three more tables just like this above this one, and they are also experiencing the same issue.  The .tableData are just different widths.</p>
  
  <p>myFile.js</p>
  
  <pre class="lang-js prettyprint-override"><code>                &lt;div className="JobTabContentContainer" id="PendingContainer"&gt;
                      &lt;table className="TableHeaderContainer"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th className="tableData10"&gt;Data1&lt;/th&gt;
                                  &lt;th className="tableData10"&gt;Data2&lt;/th&gt;
                                  &lt;th className="tableData10" &gt;Data3&lt;/th&gt;
                                  &lt;th className="tableData10" &gt;Data4&lt;/th&gt;
                                  &lt;th className="tableData12" &gt;Data5&lt;/th&gt;
                                  &lt;th className="tableData8"  &gt;Data6&lt;/th&gt;
                                  &lt;th className="tableData10" &gt;Data7&lt;/th&gt;
                                  &lt;th className="tableData10" &gt;Data8&lt;/th&gt;
                                  &lt;th className="tableData10" &gt;Data9&lt;/th&gt;
                                  &lt;th className="tableData10" &gt;Data10&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                      &lt;/table&gt;
  
                      &lt;div className="TableBodyScrollingDiv"&gt;
                          &lt;table className="TableBodyContainer"&gt;
                              &lt;tbody&gt;  
                             {this.RenderBody("Pending",this.props.jobData)}
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>myFile.css</p>
  
  <pre class="lang-css prettyprint-override"><code>
       .JobTabContentContainer {
          flex: 1;
          display: none;
          flex-direction: column;
      }
  .ViewedContentContainer {
      height: 95%;
      display: flex;
      flex-direction: column;
      /* overflow-y: auto; */
  }
  
      .ViewedContentContainer .TopBarContainer,
      .ViewedContentContainer .BottomBarContainer,
      .ViewedContentContainer .TitleBarContainer {
          min-height: fit-content;
          min-width: 916px;
          padding-top: 5px;
          padding-bottom: 5px;
          position: sticky;
          left: 0;
          right: 0;
      }
  
  
      .ViewedContentContainer .TitleBarContainer {
          text-align:center;
      }
      .ViewedContentContainer .TitleBarContainer h1 {
          margin: 0;
          padding: 0;
      }
  
          .ViewedContentContainer .TopBarContainer .TopBarSearchInput {
              float: right;
              width: 40%;
              max-width: 200px;
          }
  
      .ViewedContentContainer .TableHeaderContainer {
          border: 2px solid var(--Blue);
          background-color: var(--Blue);
          color: var(--LighterBlue);
          text-align: center;
          min-width: 916px;
      }
  
      .ViewedContentContainer .TableBodyScrollingDiv {
          text-align: center;
          border: 2px solid var(--Blue);
          background-color: white;
          overflow-y: auto;
          overflow-x: hidden;
          min-width: 916px;
          max-height: 90%
      }
  
          .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer {
              width: 100%;
              font-size: 10px;
          }
              .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow {
                  display: table-row;
              }
                  .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:nth-child(odd) {
                      background-color: var(--LightBlue);
                      color: var(--DarkBlue);
                  }
  
                  .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:nth-child(even) {
                      background-color: var(--LighterBlue);
                      color: var(--DarkBlue);
                  }
  
                  .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:hover {
                      background-color: var(--AccentBlue);
                      color: var(--DarkBlue);
                  }
  
                  .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow td{
                      word-wrap: break-word;
                  }
  
                  .ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow .JobReviewStatusBtn {
                      border-radius: 5px;
                  }
  
  </code></pre>
  
  <p>This has never been an issue before, the tables being displayed on the application just recently started doing this, so I don't know if it's an overflow issue or something simpler.</p>