scroll functionality not working on the div angular js

Question

i am working on a platform that has a framework behind it which is angular.js

and i am adding my own html into the homepage which isnt complying with the code i have written. can you please have a look at the code and let me know what im missing.

angular code:

<div class="tab-header">
  <div id="clock"></div>
  <div class="title-block">
    <h2 id="title">DEVELOPMENT - PHASE II</h2>
  </div>
</div>
<div class="tab-body">
  <div class="homepage">
    <div class="home-content">
      <div
      class="graph_box"
      id="7day"
      style="min-width: 650px; height: 515px"
    ></div>
    <div class="graph">
      <div class="fullwidth  home-text">
        <div
          class="graph_box"
          id="drillDown_Pie"
          style="min-width: 650px; height: 515px"
        ></div>
      </div>
    </div>
    <div class="graph2">
      <div class="fullwidth  home-text">
        <div
          class="graph_box"
          id="scroller_graph"
          style="min-width: 650px; height: 515px"
        ></div>
      </div>
    </div>
      </div>
    </div>

    <div class="home-sections">
      <div>
        <div class="home-section-title">
          <div class="overflow-auto ToDo-container">
            <header class="app-header">
              <h1 class="app-title">ToDo List</h1>
            </header>

            <section class="app-body">
              <div id="todo">
                <ul class="todo-list"></ul>
                <form class="add-todo">
                  <input
                    type="text"
                    placeholder="Don't Forget to..."
                    name="item"
                    required
                  />
                  <input type="submit" value="+" />
                </form>
              </div>
              <div class="remove-List">Remove All</div>
            </section>
          </div>
        </div>
      </div>
      <div>
        <div class="buttons">
          <button id="btn_home">
            <p class="totalNumbersDesc">Total Number of Tags</p>
            <h1 class="btnNumb_value" id="totalTagDash"></h1>
          </button>
          <button id="btn_home">
            <p class="totalNumbersDesc">Total Number of Lines</p>
            <h1 class="btnNumb_value" id="totalLinesDash"></h1>
          </button>
          <button id="btn_home">
            <p class="totalNumbersDesc">Total Number of Documents</p>
            <h1 class="btnNumb_value" id="totalDocDash"></h1>
          </button>
          <button id="btn_home">
            <p class="totalNumbersDesc">Total Number of Transmittals</p>
            <h1 class="btnNumb_value" id="totalTransDash"></h1>
          </button>
        </div>
      </div>
    </div>

    <div class="home-footer footer-shadow">
      <span>xxxxx</span>&trade;:
    </div>
  </div>
</div>

css:

/* toDo  */

.toDo-comp-item {
    text-decoration: none;
    font-weight: bold;
    color: rgb(145, 145, 145);
}

.toDo-container {
    width: 100%;
    max-width: 960px;
    margin: 0px auto;
}

.app-header {
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    height: 40px;
    background: #336699;
}

.app-title {
    font-size: 28px;
    line-height: 40px;
    padding: 0px;
    margin: 0px;
    color: #fff;
    text-shadow: 1px 1px 3px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);
}

.app-headline {
    color: #999;
    font-size: 15px;
}

.app-body {
    margin-top: 40px;
}

#toDo .add-todo {
    display: flex;
    min-width: 330px;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: #ffffff;
    padding: 30px;
    box-shadow: 0 0 30px -10px rgba(0, 0, 0, 0.3);
}

#toDo .add-todo input[type=text] {
    width: 90%;
    padding: 0 0 10px 0;
    font-size: 21px;
    border: 0;
    border-bottom: 1px solid black;
    outline: none;
}

#toDo .add-todo input[type=submit] {
    font-size: 19px;
    width: 10%;
    border: 1px solid black;
    background: white;
    transition: background 0.3s ease;
    cursor: pointer;
    outline: none;
}

#toDo .add-todo input[type=submit]:focus,
#toDo .add-todo input[type=submit]:hover {
    background: #ff009b;
}


ul.todo-list {
    margin: 0;
    padding: 0 0 0 0;overflow: auto;
}



ul.todo-list li {
    transition: box-shadow 0.2s ease;
    list-style: none;
    box-shadow: 0 2px 3px -8px black;
    margin-bottom: 5px;
    word-break: break-word;
    margin: 5px 5px 0;
}

ul.todo-list li:hover {
    box-shadow: 0 2px 15px -5px black;
}

ul.todo-list li input[type=checkbox] {
    display: none;
}

ul.todo-list li label {
    position: relative;
    display: block;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

ul.todo-list li label span {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    font-size: 9px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
    width: 10px;
    height: 10px;
    color: #ffffff;
}

ul.todo-list li label span:hover {
    background: red;
}

ul.todo-list li input[type=checkbox]:checked+label {
    text-decoration: line-through;
    background: red;
    color: #ffffff;
}

.remove-List {
    margin: 5px 5px 5px 5px;
    cursor: pointer;
    border-style: solid;
    border-width: thin;
    text-align: center;
}

.remove-List.hidden {
    display: none;
}

/* toDo */

but, when im loading it on the server this is what happens. this is before adding todo lists, only 2 items

this is after, its only increasing the size of the home-section not the actual list???? when i add it on the server its showing this ![enter image description here ] 4

Answer 1

i never know that, once the height was fixed, the overflow will automatically happen. –

 ul.todo-list {
        margin: 0;
        padding: 0 0 0 0;
        height: 150px;
        overflow: auto
    }