Closed2023/05/19にクローズ2

CSSの記載方法、親要素のビューポートと子要素の%について

CSS

HTML

React

Chakra UI

Kenta Sato 2023/05/19に更新

CSSの仕様

親要素の中で子要素に%指定でwidthやheightを指定する場合、その%は親要素からの相対的な大きさで決められる

つまり子要素の依存先である親要素の大きさは明示的である必要があるため、親要素のwidthやheightがautoやvw,vhで指定されているとうまく表示がされなくなってしまうらしい

なので子要素で%を使う場合は親要素の値を明確な値で記載する必要があるらしい
(下記のように記述するとwとhが指定されない↓)

ChakraUIでの記述

    <Flex
      sx={{
        h: "calc(100vh - 8.5rem)", //この親要素でvhを使った指定をしているため
        w: "60%",
      }}
    >
      <Flex
        sx={{
          h: "calc(90%)", //子要素で%を使った指定が上手くいかない
          w: "calc(90%)", //子要素で%を使った指定が上手くいかない
        }}
      ></Flex>
    </Flex>

Kenta Sato 2023/05/19に更新

それでもvw,vhを使いたいとき

だがそうはいっても親要素でビューポートを使ったうえで子要素で%を使いたい場合がある
その場合は以下のようにpositionを使って指定する必要があるようだ

(下記はChakraUIの例だが、通常のCSSでも同じである↓)

ChakraUIでの記述

    <Flex
      sx={{
        h: "calc(100vh - 8.5rem)",
        w: "60%",
        position: "relative", //親要素にrelative
      }}
    >
      <Flex
        sx={{
          h: "calc(90%)",
          w: "calc(90%)",
          position: "absolute", //子要素にabsolute
        }}
      ></Flex>
    </Flex>

このスクラップは2023/05/19にクローズされました