Selectbox with responsive height

Question

I am currently trying to build a responsive website and have run into an issue with selectbox.

I would like the select box to be the same height as the responsive image next to it at all times, with the height of the image changing according to the screen size.

I expected that if I set the height of the selectbox it would just fill the container, however this doesn't seem to work.

Setting the height of the selectbox to px allows me to set the height, but this isn't responsive, and I would like to avoid creating an eventlistener on resize to dynamically set the selectbox height to the same as the image.

Any help would be much appreciated.

div {
  height: 100%;
  display: block;
  overflow: hidden;
}

select {
  float:left;
  height: 100%;
}

img {
  width: 90%;
  height: auto;
}

<div>
  <select size="4">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
  </select>
  <img src="http://via.placeholder.com/350x150" />
</div>

Answer 1

Not sure if you're still looking for a solution. But I was able to accomplish this by using a grid.

I used your example above but just changed some CSS

div {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 10% 90%;
}

https://jsfiddle.net/jh8u825f/