こんな時は？

よくあるつまづきポイントの対処法

Flexの要素が横に飛び出してしまう場合の対処法

改行位置がない長い文字列があると、画面幅が狭い時に要素が外側へはみ出してしまうことがあります。

そのような場合は、原因となる要素に.-ovw:any（overflow-wrap: anywhere のユーティリティクラス）を付けてください。

↓

画面幅が狭い時に横にはみ出す例(resizeして確認してください)

LooooooooooooongStrinnnnnnnnnnngs!!!!

AAA

BBB

CCC

リサイズ可能

<Flex g='20'>
  <p>LooooooooooooongStrinnnnnnnnnnngs!!!!</p>
  <p>AAA</p>
  <p>BBB</p>
  <p>CCC</p>
</Flex>

↓

はみ出す原因となるテキストに -ovw:any を適用

LooooooooooooongStriiiinnnnnnnnnnngs!!!!

AAA

BBB

CCC

リサイズ可能

  <Flex g='20'>
    <Text className='-ovw:any'>LooooooooooooongStriiiinnnnnnnnnnngs!!!!</Text>
    <Text>AAA</Text>
    <Text>BBB</Text>
    <Text>CCC</Text>
  </Flex>

Heroエリアで子要素の`minH`に`%`を使う方法

最低限の高さを確保しつつ、ウインドウが狭い時にコンテンツに合わせて高さを伸ばしたいケースについて。

Heroコンテンツの高さを min-height や aspect-ratio で指定する場合、子要素の height や min-height に%を指定しても無効になってしまいます。

↓

NG例

minH:50%が効かない

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能

<Stack isFullwide minH='400px' bgc='base-2'>
  <Box minH='50%' my='auto' bgc='base' p='20' px='40' ac='c'>
    <Text fw='bold'>minH:50%が効かない</Text>
    <Dummy length='s' />
  </Box>
</Stack>

このため、少し工夫が必要です。

↓

改善例

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能

<Stack isFullwide minH='400px' bgc='base-2'>
  <Box d='grid' fxg='1' ai='c' px='40'>
    <Center minH='50%' bgc='base' p='30' bxsh='1'>
      <Text fw='bold'>OK</Text>
      <Dummy length='s' />
    </Center>
  </Box>
</Stack>

親要素がStack で構成されているので、子要素であるコンテンツのflex-growを1にして高さを親に合わせて伸ばします。
子要素をgridにすることで、さらにその子要素でheightやmin-heightに%を使えるようにします。
（この時、その子要素を中央寄せ等にしないとstretchが適用されて高さが伸びることに注意してください。）

↓

活用例

min-height 50%

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

リサイズ可能

<Stack isFullwide pos='r' minH='50vh'>
  <Frame isLayer>
    <Media src='/img/img-3.jpg' alt='' width='960' height='640'/>
  </Frame>
  <Grid fxg='1' ai='c' hasGutter>
    <Center minH='50%' p='30' c='white' bgc='black:75%' bdrs='2' g='20'>
      <Text fw='bold' fz='xl'>min-height 50%</Text>
      <Dummy length='l' />
    </Center>
  </Grid>
</Stack>

Center で内部をスクロール可にしたい時の注意点

“画面サイズに余裕がある時は上下中央揃えにしたいが、画面サイズが小さい時にコンテンツがはみ出すのでスクロールできるようにしておきたい。”

というケースでは、少し注意が必要です。

gridやflexで上下中央揃えを実装する方法では、スクロール時に上端が見えなくなるという問題があります。

Lismの<Center> は grid を使ってるので、この問題が発生します。

次のデモエリアをリサイズして挙動を確認してみてください。

↓

スクロール時にコンテンツが全て見えない 😱

DEMO

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

リサイズ可能

<Center px='30' py='50' g='20' h='45vh' ovy='auto' bd>
  <Text fz='l' fw='700'>DEMO</Text>
  <Dummy length='l' />
  <Dummy length='xl' />
</Center>

これを回避するには、次のアプローチが必要です。

<Center>の親要素に高さやアスペクト比、overflow-y:autoを指定する。
<Center>には min-height:100% を指定する。

height:100% だとうまくいかないので注意してください。

↓

スクロール時、正常にコンテンツが見える 😄

DEMO

リサイズ可能

<Box px='30' py='50' h='45vh' ovy='auto' bd>
  <Center minH='100%' g='20'>
    <Text fz='l' fw='700'>DEMO</Text>
    <Dummy length='l' />
    <Dummy length='xl' />
  </Center>
</Box>

アスペクト指定で、コンテンツがはみ出すとスクロール可能にしたい時も同様です。

↓

TEXT

ロレムイプサムの座り雨。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。つまり、彼らはあなたの悩みに一般的な魂を癒しています。困難な必要性に少ないもの、それがコンテンツの比較です。あなたが選択的な彼女の事実、無意味な含有、便利な阻止と甘さ、誰かがもっと腐敗した残り物。提供する時間の生活、それで発明者が賢明です。

リサイズ可能

<Frame ar='16/9' ovy='auto' bd p='30' g='20'>
  <Center minH='100%' g='20'>
    <Text fz='l'>TEXT</Text>
    <Dummy length='xs' lang='ja'/>
    <Dummy length='xl' lang='ja'/>
  </Center>
</Frame>

↓

TEXT

ロレムイプサムの座り雨。

リサイズ可能

<Center ar='16/9' ovy='auto' bd p='30' g='20'>
  <Text fz='l'>TEXT</Text>
  <Dummy length='xs' lang='ja'/>
  <Dummy length='xl' lang='ja'/>
</Center>

こんな時は？

Flexの要素が横に飛び出してしまう場合の対処法

Heroエリアで子要素のminHに%を使う方法

Center で内部を スクロール可 にしたい時の注意点

Heroエリアで子要素の`minH`に`%`を使う方法

Center で内部をスクロール可にしたい時の注意点