title: Materialize : how to "push" select input outside of the modal?
body: <p>There is a modal and a select with a lot of options inside.</p>
  
  <p>When the select is opened, it looks like that :</p>
  
  <p><a href="https://jsfiddle.net/m3kxodng/2/" rel="nofollow noreferrer">https://jsfiddle.net/m3kxodng/2/</a>
  <a href="https://i.stack.imgur.com/57vrD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/57vrD.png" alt="enter image description here"></a></p>
  
  <p>I feel that the user experience is bad because there are 2 scroll bars and the mouse scroll apply on the modal not on the select. </p>
  
  <p>It would be better like this :
  <a href="https://jsfiddle.net/m3kxodng/4/" rel="nofollow noreferrer">https://jsfiddle.net/m3kxodng/4/</a>
  <a href="https://i.stack.imgur.com/KnI98.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KnI98.png" alt="enter image description here"></a></p>
  
  <p>I've added this to the css</p>
  
  <pre><code>.modal {
      overflow-y: visible;
  }
  </code></pre>
  
  <p>But it causes a no-negligable regression : the modal does not have a good height. It is visible when the modal is opened :
  <a href="https://i.stack.imgur.com/wBQhA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wBQhA.png" alt="enter image description here"></a></p>
  
  <p>Is this possible to push out the "select" of the modal, without regression? (And without using javascript)</p>