Array list content isnt showing properly and skipping some data from start-CodePudding

I am trying to create a list of students using array and display is inside div . I created a list using javascript code listed below , but the problem i am facing is that when the list gets bigger i tried css property overflow auto to fix the overflow issue but its skips some of my data from start kindly someone help me out i am new to javascript

const student_list = [
'moiz',
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie' 
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie',
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
,
'John'
, 'Adam'
, 'Walter'
, 'Jesse'
, 'Charlie'
]


let list = document.getElementById('list_of_students');
student_list.forEach((item) => {
  let li = document.createElement("li");
  li.innerText = item;
  list.appendChild(li);
})

```

#studentsdata {
  color: white;
  width: 100%;
  height: 500px;
  border: 2px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#list_of_students ol {
  display: list-item;
  width: 300px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 5px;
  padding: 5px;
}

#list_of_students li {
  width: 200px;
  height: auto;
  margin: 5px;
  font-size: large;
}

<div id="studentsdata">
  <ol id="list_of_students"></ol>
</div>

CodePudding user response：

REMOVE : color:white and height from css from #studentsdata

const student_list = [
  'moiz', 'John', 'Adam', 'Walter', 'Jesse', 'Charlie','Walter', 'Jesse', 'Charlie'
]
let list = document.getElementById('list_of_students');
student_list.forEach((item) => {
  let li = document.createElement("li");
  li.innerText = item;
  list.appendChild(li);
})

#studentsdata {
  width: 100%;
  border: 2px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#list_of_students
{
   max-height:200px;
   overflow: auto;
}
#list_of_students ol {
  display: list-item;
  width: 300px;
  margin: 5px;
  padding: 5px;
}

#list_of_students li {
  width: 200px;
  height: auto;
  margin: 5px;
  font-size: large;
}

<div id="studentsdata">
  <ol id="list_of_students"></ol>
</div>

CodePudding user response：

try not to set width or height for elements exact size try in #list_of_students li ,auto-height and use camelCase for naming in JavaScript codes .