Typeahead увеличивает высоту ящика

Question

Сейчас у меня в ящике есть панель поиска. У меня есть предложения поиска в заголовке, но когда он расширяется, он смещает высоту ящика вниз. Как мне сделать так, чтобы начальная часть шрифта расширялась вниз, не влияя на высоту ящика.

Я использую material-ui SwipeableDrawer.

Вот мой компонент Drawer:

<SwipeableDrawer
  anchor={'top'}
  open={this.state.searchOpen}
  onClose={ () => this.setState({ searchOpen: false })}
>
  <Search/>
</SwipeableDrawer>

Мой поисковый компонент и напечатанный текст таковы:

<div>
 <Manager>
   <Reference>
     {({ref}) =>
       <form
         onSubmit={(e) => {
           e.preventDefault();
           this.props.onSubmit(this.props.value);
         }}
       >
         <div className="search">
           <input
             autoComplete={`off`}
             onChange = { ({ target: { value } }) => this.props.onChange(value) }
             value = { this.props.value }
             ref={ref}
           >
           </input>
         </div>
       </form>
       }
   </Reference>
     {
       this.props.results ?
       <Popper placement="bottom-start">
         {({ placement, ref, style }) =>
            <div ref={ref} style={style} data-placement={placement} className="search-results">
              {
                this.props.results.map(product =>
                  <Link
                    className="search-result"
                    to={`/search?query=${product.name}`}
                  >
                    <div className="result-title">
                      { product.name }
                    </div>
                  </Link>
                 )
               }
              </div>
            }
        </Popper>
         : null
     }
   </Manager>
 </div>