tableタグの高さを親のdivタグの高さを超えないようにしたい

Question

聞きたいこと

Reactでtableタグでテーブルを作成しているのですが、親のdivタグで指定したheighの枠を超えないようにしたいと思っています。
ただ現状ですと、下の画像のようにdivタグに高さを指定しても貫通してしまっています。

※ 赤い色の内側にテーブルを配置したいです。

コードは下になっています。

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div style={{ height: "100px", backgroundColor: "red" }}>
        <table style={{ heihgt: "100%", overflow: "scroll" }}>
          <thead>
            <tr>
              <th>First</th>
              <th>Second</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>100</td>
              <td>200</td>
            </tr>
            <tr>
              <td>100</td>
              <td>200</td>
            </tr>
            <tr>
              <td>100</td>
              <td>200</td>
            </tr>
            <tr>
              <td>100</td>
              <td>200</td>
            </tr>
            <tr>
              <td>100</td>
              <td>200</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

単純にtableのheighを100%にしたり、overflowをscrollにすれば良いと思ったのですが、なかなかうまくいきません。

Answer 1

はみ出た部分をどのように表示させるのでしょうか。

スクロールできるようにするなら、overflow を設定するのは、親のdivタグのほうでしょう。