абсолютная позиция CSS делает текстовое поле опускается

Question

• Я создаю прототип с использованием фишек материал-интерфейс.
  • Когда я нажимаю Test IPA , текстовое поле должно отображаться сразу под текстом Test IPA.
  • В прототипе оно отображается сразу ниже, но тогда, когда я включаю его с другимифункциональные возможности, он показан внизу.
• Я отладил CSS, из-за абсолютной позиции для каждого сценария он показывает разные значения и поступает из пользовательского интерфейса материала.
• Не могли бы вы рассказать мне, как это исправить по отношению к другим компонентам?
• Ниже приведен фрагмент кода, песочница и ошибка.

Проблема с другими компонентами https://codesandbox.io/s/qqqk23x3q

Работает по отдельности https://codesandbox.io/s/1y2mvo0ol3

JSX:

<td>
    <ChipsTextbox chipName="test IPA" />
</td>

<Menu id="simple-menu" open={open} onClose={this.handleClose}>
    <TextField onChange={this.onChange} onKeyDown={this.handleKeyPress} />
</Menu>

CSS:

.MuiPopover-paper-1706 {
    outline: none;
    position: absolute;
    min-width: 16px;
    max-width: calc(100% - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 16px;
    max-height: calc(100% - 32px);
}