React Material-UIのNativeSelectの高さ変更方法について

Question

前提・実現したいこと

React、Javascript初心者なので、必要な情報が足りないかもしれません。
すみませんが、足りない情報があればご教示お願い致します。

ReactでMaterial-UIのNativeSelectについて質問があります。

親要素いっぱいにSelectのリストを表示したいです。
現在は高さが固定されていてスクロールバーが出てしまいます。

NativeSelectではなくても構わないので、
ドロップダウンのような形式ではなくNativeSelectのような初めからリストが表示されていて、
複数選択できるようなものがあればご紹介いただきますとうれしいです。

該当のソースコード

import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
    maxWidth: 300,
  },
  chips: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  chip: {
    margin: 2,
  },
  noLabel: {
    marginTop: theme.spacing(3),
  },
  selectArea: {
    height: '100%',
  },
}));

const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
  'Ralph Hubbard',
  'Omar Alexander',
  'Carlos Abbott',
  'Miriam Wagner',
  'Bradley Wilkerson',
  'Virginia Andrews',
  'Kelly Snyder',
];

export default function MultipleSelect() {
  const classes = useStyles();
  const theme = useTheme();
  const [personName, setPersonName] = React.useState([]);

  const handleChangeMultiple = (event) => {
    const { options } = event.target;
    const value = [];
    for (let i = 0, l = options.length; i < l; i += 1) {
      if (options[i].selected) {
        value.push(options[i].value);
      }
    }
    setPersonName(value);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel shrink htmlFor="select-multiple-native">
          Native
        </InputLabel>
        <Select
          className={classes.selectArea}  {* ←height:100%を指定しました。 *}
          multiple
          native
          value={personName}
          onChange={handleChangeMultiple}
          inputProps={{
            id: 'select-multiple-native',
            size: 28,  {* ←頂いた内容を反映しました。 *}
          }}
        >
          {names.map((name) => (
            <option key={name} value={name}>
              {name}
            </option>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

試したこと

公式ページのデモやprops一覧を参考にしているのですが、高さの変更方法がわからなくて詰まっています。

補足情報

初めての質問なので、不足している情報等あれば教えてください。

よろしくお願いします。

現在の画面のキャプチャを取ったので掲載します。

変更後：

Comments

[hoshi-takanori]

Select の inputProps に size を指定すれば良いかも。

inputProps={{
id: 'select-multiple-native',
size: 10,
}}

[Takumi-Y]

hoshi-takanoriさん

ありがとうございます！
inputPropsにsizeを指定することでできました！
しかし色々試してみたのですが、親要素に対して100%の高さ指定ができず…。
sizeは文字数？の単位以外に指定できないのでしょうか？

[hoshi-takanori]

Select の size は項目数にして、親要素を overflow-y: scroll するとか…。

[Takumi-Y]

hosi-takanoriさん

<Select>のheightを100%に指定したところ、思っていた表示になりました！
本当にありがとうございます！