Material UI DropDownMenu nimmt 100% Höhe

Question

Ich habe ein DropDownMenu in einer bestimmten Seite, die in einer Tabellenspalte gerendert wird.

Wenn ich das Menü klicken zu öffnen, wird es mit 100% der Seitenhöhe.

Ich fand nichts, wie dies in der Dokumentation, noch die Gemeinde.

Ich habe keine Relative/absolute Container-Beziehung mit den untergeordneten Komponenten.

Ich habe versucht, maxHeight zu setzen, aber das Gleiche passiert.

Vielen Dank für die Hilfe.

EDIT:

Einige Code.

Dies ist die Komponente, wo die DropDownMenu instanziiert wird:

export default ({ 
    variables, 
}: Props) => (
    <Table multiSelectable> 
    <TableHeader enableSelectAll> 
     <TableRow> 
     <TableHeaderColumn className={styles.headerColumn}>Variável</TableHeaderColumn> 
     <TableHeaderColumn className={styles.headerColumn}>Tipo</TableHeaderColumn> 
     <TableHeaderColumn className={styles.headerColumn}>Linha 01</TableHeaderColumn> 
     <TableHeaderColumn className={styles.headerColumn}>Linha 02</TableHeaderColumn> 
     <TableHeaderColumn className={styles.headerColumn}>Linha 03</TableHeaderColumn> 
     </TableRow> 
    </TableHeader> 
    <TableBody> 
     {variables.map(variable => (
     <TableRow key={variable.id}> 
      <TableRowColumn className={styles.column}>{variable.header}</TableRowColumn> 
      <TableRowColumn className={styles.columnDropdown}> 
      <DropDownMenu value={variable.type}> 
       <MenuItem value="numerical" primaryText="Numérica" /> 
       <MenuItem value="categorical" primaryText="Categórica" /> 
       <MenuItem value="key" primaryText="Chave" /> 
       <MenuItem value="answer" primaryText="Resposta" /> 
      </DropDownMenu> 
      </TableRowColumn> 
      {variable.line.map(line => (
      <TableRowColumn key={line} className={styles.column}>{line}</TableRowColumn> 
     ))} 
     </TableRow> 
    ))} 
    </TableBody> 
    </Table> 
); 

Dieser Code einen SASS Modul verwendet:

.headerColumn { 
    font-size: 16px !important; 
} 

.column { 
    font-size: 14px !important; 
} 

.columnDropdown { 
    @extend .column; 
    padding-left: 0 !important; 
} 

Ich habe keinen Schwimmer und nichts Absolute in dieser Komponente. Analysiert man das offene Menü, nimmt es top: 0 und max-height: 1014px;. Ich kann nicht sagen warum.

Answer 1

[data-reactroot] { 
    height: 100% !important; 
} 

Das war verhext.