HTML and CSS issues with select and option tags

Question

I am having difficulty on properly adjusting the select options box to handle what I want it to do.

I am brand new to CSS/HTML and currently doing a project, which goal is basically a website to replicate that of exam/student online test taking.

The current box ill add in a screenshot is the full length of a programming question sent to me from a database. I am populating the option tags with different questions based on a filter.

My only real issue is how I can properly "view" the question in its entirety rather than xxx amount of space in pixels. (set to 600 currently).

Can the select tag display A large amount of text (a long question) by showing multiple lines in anyway? If yes please help me understand how, if no.. what would be the alternative route to how I have it set.

I need to be able to select it, because I add the value selected (the question) to an "exam" displayed on the same page, which is then later submitted with whichever questions that have been selected.

Question Screenshot

Current Relevant Code:

<select class="questionBank" id="questionSelect" size="10" style="width:600px;"></select>

//some of the script code to maybe help understand whats happening.
//this script is just the filter connecting to a backend program and pulling correct questions for population.
<script>
   function filterq(){
  var ajaxRequest = new XMLHttpRequest();
  ajaxRequest.onreadystatechange = function() {
    if (this.readyState == 4) {
      document.getElementById('questionSelect').innerText = null
      alert(this.responseText);

      for(i=0;i<21;i++){
      var questionDisplay = document.getElementById("questionSelect");
      var options = document.createElement("option");
      var data=JSON.parse(this.responseText);

      questionArray.push(data['list'][i]['question']);
      idArray.push(data['list'][i]['ID']);

      options.text=questionArray[i]+" (ID:"+idArray[i]+")";
      questionDisplay.add(options);
    } 
    </script>

Answer 1

It doesn't seem to possible to have multi line option or options with breaks in this type of select box which seems to be what you're asking but you could alternatively make something custom using a regular list:

document.getElementById("list").addEventListener("click", function(e) {
        const target = e.target;
        Array.from(document.getElementsByTagName("li")).forEach(item =>
          item.classList.remove("selected"),
        );
        target.classList.add("selected");
      });

.selected {
        background-color: blue;
        color: white;
      }

      li {
        list-style: none;
        cursor: pointer;
      }
}

    <ul id="list">
      <li class="selected">
        A <br />
        multiline <br />
        option
      </li>
      <li>
        Another<br />
        multi<br />
        line <br />
        option here
      </li>
      <li>
        Foo<br />
        Bar<br />
        Baz <br />
      </li>
    </ul>