react css 中の要素の大きさにだけpointerを適応したい

listsの配列の中に"アイウエオかきくけこ", "ご飯", "味噌汁"の３つの文字があります。
その文字にカーソルが当たった時にだけcssのpointerを適応したいです。
現在余白部分にもpointerのスタイルが適応されてしまいます。
文字部分にだけcssを適応したい場合はどうしたらいいでしょうか？

export default function App() {
  const lists = ["アイウエオかきくけこ", "ご飯", "味噌汁"];
  return (
    <div className="App">
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          width: "300px",
          background: "red"
        }}
      >
        <div>タイトル</div>
        <div>内容</div>
        {lists.map((list) => (
          <div
            style={{ cursor: "pointer", display: "inline-block" }}
            key={list}
          >
            {list}
          </div>
        ))}
      </div>
    </div>
  );
}

コード

行動規範の内容に同意します

回答1件

display: flex;を設定するとデフォルトはalign-items:stretch;なので、フレックスアイテムは親要素（フレックスコンテナ）のサイズまで拡張されます。align-items: flex-start; を追加するといいでしょう。

Reactは分からんけど、たぶん下記のような感じかな。

js
1      <div
2        style={{
3          display: "flex",
4          flexDirection: "column",
5          alignItems: "flex-start",
6          width: "300px",
7          background: "red"
8        }}
9      >