How to line break the selected option text in a MaterializeCSS select - materialize

Question

I have a MaterializeCSS form with selects which have more text than the default width can show.
Currently, the text is a single line that is simply cut off at the widget edge.
The expanded dropdown of options line breaks the text correctly, but the collapsed dropdown does not.
I want to resize the collapsed select dropdown so that all text is shown.
My form is generated by django-material in a Django app, but I believe my fundamental problem is with MaterializeCSS's select widget.
An example element looks like this:
<div class="select-field col s12 required" id="id_formset-organisation_answers-1-question_container">
<label for="id_formset-organisation_answers-1-question">Question</label>
<div class="select-wrapper">
<input class="select-dropdown dropdown-trigger" type="text" readonly="true"
data-target="select-options-f739ead4-0165-a758-650e-74ba61fac041">
<ul id="select-options-f739ead4-0165-a758-650e-74ba61fac041"
class="dropdown-content select-dropdown"
tabindex="0">
<li id="select-options-f739ead4-0165-a758-650e-74ba61fac0410" tabindex="0">
<span>---------</span>
</li>
<li id="select-options-f739ead4-0165-a758-650e-74ba61fac0411" tabindex="0">
<span>VERY LONG TEXT 1</span>
</li>
<li id="select-options-f739ead4-0165-a758-650e-74ba61fac0412" tabindex="0"
class="selected">
<span>VERY LONG TEXT 2</span>
</li>
<li id="select-options-f739ead4-0165-a758-650e-74ba61fac0413" tabindex="0">
<span>VERY LONG TEXT 3</span>
</li>
</ul>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path d="M7 10l5 5 5-5z"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
<select id="id_formset-organisation_answers-1-question"
name="formset-organisation_answers-1-question" tabindex="-1">
<option value="">---------</option>
<option value="1">VERY LONG TEXT 1</option>
<option value="2" selected="selected">VERY LONG TEXT 2</option>
<option value="3">VERY LONG TEXT 3</option>
</select>
</div>
<div class="help-block">The question.</div>
</div>
The element <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="..."> does not contain any inner HTML, but by some JS magig shows the selected option. That option, a very long text, is shown as a single line. That line is what I want to line break.
I have searched the MaterializeCSS docs, SO, and the web to figure out a way to force the text to linebreak. The obvious answer seems to be to apply CSS styles for display, overflow and the like.
Style via CSS
I can access the selected text from CSS:
input.select-dropdown {
/* This works: */
color:green;
min-height: 20rem;
/* This does not do anything: */
display: inline-block;
min-height: -moz-fit-content;
min-height: fit-content;
overflow-wrap: break-word;
z-index:10;
}
The above CSS makes the text in each select green and increases the box height, but still comes as a single line with invisible overflow.
I have experimented with different CSS selectors to make sure that we're targeting the correct element here.
No permutation of any CSS class here could get that line to wrap.
Style via JS
MaterializeCSS initialises the widgets through a lot of JS events on page load.
I can also override the styles using JS after page load by inserting:
/**
* Resize select dropdowns to fit text
* #see https://materializecss.com/select.html
*/
window.addEventListener('load', function() {
document.querySelectorAll('select').forEach((el) => {
console.log("Styling element " + el.id);
el.M_FormSelect.input.style.cssText="color:red;";
console.log(el.M_FormSelect.input.style);
});
So I can now take the text that was green as per my CSS and make it red. Again, no style related to text flow (overflow, display, etc) is able to break the text here either.