increase size of modal (when dropdown is clicked) - html

Question

I have a modal with a dropdown. When clicking the dropdown the modal always gets a scrollbar and I wanted to know if I miss something obvious? I could probably just add a class modalheight and define in css:
.modalheight {
min-height: 400px;
}
but this seems not like a true solution.
function closeModal () {
var modal = document.getElementById("mymodal")
modal.classList.remove("is-active")
};
function activateDropDown () {
var dropdown = document.getElementById("mydropdown");
dropdown.classList.add("is-active")
};
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<div class="modal is-active" id="mymodal">
<div class="modal-background">
</div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
this is a test:
<div class="dropdown" id="mydropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" onclick="activateDropDown()">
<span>Dropdown button</span>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
test 1
</a>
<a href="#" class="dropdown-item">
test 2
</a>
<a href="#" class="dropdown-item">
test 3
</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
Can I somehow make the modal big enough to fit all the buttons options dynamically? If not, how would I do it statically?

Answer 1

Check this option, I think the behaviour is connected with the dropdown menu absolute positioning that takes it out of the normal flow. By the way, for button html tag both the starting and ending tag are mandatory.
function closeModal () {
var modal = document.getElementById("mymodal")
modal.classList.remove("is-active")
};
function activateDropDown () {
var dropdown = document.getElementById("mydropdown");
dropdown.classList.toggle("is-active")
};
#dropdown-menu {
position: static;
}
#modal-content {
max-height: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<div class="modal is-active" id="mymodal">
<div class="modal-background">
</div>
<div class="modal-content" id="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="content">
this is a test:
<div class="dropdown" id="mydropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" onclick="activateDropDown()"> <span>Dropdown button</span></button>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
test 1
</a>
<a href="#" class="dropdown-item">
test 2
</a>
<a href="#" class="dropdown-item">
test 3
</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>