I'm trying to limit the size of the option according to the size of the field (select), not to leave the page or even the browser window. Is there any way to control it?

I tried to limit with width and max-width, but I couldn't. I just managed to apply it in the select.

<select class="form-control" data-val="true" data-val-number="The field IdProduto must be a number." data-val-required="O campo IdProduto é obrigatório." id="Status" name="IdProduto" style="width: 120px">
  <option value="">&lt; Selecione &gt;</option>
  <option value="4">TESTE PRODUTO COM NOME MUITO GRANDE PARA DROPDOWN</option>
</select>

select does not receive any modification from javascript and css.

"Product" field with dropdown larger than field

And an additional question: When I use the browser's responsive mode, the dropdown display is different. Could you explain to me why? As far as I know, on mobile and tablet, a "modal" is displayed with the options to be selected.

Dropdown in responsive mode