Как запретить элементу div изменять ширину себя?

Я использую следующий код:

#input {
  transiction: width 0.4s ease-in-out;
  border: 2px solid black;
  border-radius: 2px;
}
#input:focus {
  width: 100%;
  outline: none;
}
uans {
  padding: 10px;
}

<div id="uans"><input id="input"></div>

Проблема в том, что когда я фокусируюсь на поле ввода, внизу страницы появляется полоса прокрутки, а ширина div меняется. Как мне запретить ему изменяться в размерах? max-width не подходит, я делаю адаптивную вёрстку.