Construyo un prototipo usando chips material-UI.Cuando hago clic enPrueba IPA el cuadro de texto debe aparecer inmediatamente debajo del texto Test IPA.En el prototipo, se muestra inmediatamente debajo, pero mientras lo incluyo con otras funcionalidades, se muestra en la parte inferior.I depuré el CSS, debido a la posición absoluta para cada escenario, muestra valores diferentes y proviene de la interfaz de usuario material. ¿Puede decirme cómo solucionarlo con respecto a otros componentes? Proporcionando mi fragmento de código, sandbox y captura de pantalla de error a continuación.

Problema con otros componenteshttps: //codesandbox.io/s/qqqk23x3

Trabajando adecuadamente individualmentehttps: //codesandbox.io/s/1y2mvo0ol

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);
}