こんな時は？

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

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

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

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

↓

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

LoooooooooooooooooooooooooongStriiiiiiiiiiinnnnnnnnnnngs!!!!

AAA

BBB

CCC

リサイズ可能

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

↓

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

LooooooooooooongStriiiinnnnnnnnnnngs!!!!

AAA

BBB

CCC

リサイズ可能

  <Flex g='15'>
    <HTML.p className='-ovwrap:any'>LooooooooooooongStriiiinnnnnnnnnnngs!!!!</HTML.p>
    <HTML.p>AAA</HTML.p>
    <HTML.p>BBB</HTML.p>
    <HTML.p>CCC</HTML.p>
  </Flex>

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

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

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

↓

NG例

min-h:50%が効かない

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

リサイズ可能

<Stack max-sz='full' min-h='400px' bgc='base-2'>
  <Box min-h='50%' my='auto' bgc='base' p='15' px='30' ac='center'>
    <HTML.p fw='bold'>min-h:50%が効かない</HTML.p>
    <Dummy length='s' />
  </Box>
</Stack>

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

↓

改善例

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

リサイズ可能

<Stack max-sz='full' min-h='400px' bgc='base-2'>
  <Grid fxg='1' ai='center' px='30'>
    <Center min-h='50%' bgc='base' p='20' bxsh='10'>
      <HTML.p fw='bold'>OK</HTML.p>
      <Dummy length='s' />
    </Center>
  </Grid>
</Stack>

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

↓

活用例

min-height 50%

リサイズ可能

<Stack max-sz='full' pos='rel' min-h='50vh'>
  <Frame isLayer>
    <Media src='https://cdn.lism-css.com/img/a-3.jpg' alt='' width='960' height='640'/>
  </Frame>
  <Grid fxg='1' ai='center' hasGutter>
    <Center min-h='50%' p='20' c='white' bgc='black:75%' bdrs='10' g='15'>
      <HTML.p fw='bold' fz='xl'>min-height 50%</HTML.p>
      <Dummy length='l' />
    </Center>
  </Grid>
</Stack>

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

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

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

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

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

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

↓

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

DEMO

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

リサイズ可能

<Center px='20' py='40' g='15' h='45vh' ov-y='auto' bd>
  <HTML.p fz='l' fw='bold'>DEMO</HTML.p>
  <Dummy length='l' />
  <Dummy length='xl' />
</Center>

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

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

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

↓

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

DEMO

リサイズ可能

<Box px='20' py='40' h='45vh' ov-y='auto' bd>
  <Center min-h='100%' g='15'>
    <HTML.p fz='l' fw='bold'>DEMO</HTML.p>
    <Dummy length='l' />
    <Dummy length='xl' />
  </Center>
</Box>

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

↓

TEXT

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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。内容の違いを比べるためのドラーとして、静かにそこにあります。選ばれた事実や、意味を限定しない言葉の並びは、全体の雰囲気を整える役割を果たします。時間の流れの中で、そうした文章は自然に形を変え、使う人の意図に委ねられていきます。

リサイズ可能

<Frame ar='16/9' ov-y='auto' bd p='20' g='15'>
  <Center min-h='100%' g='15'>
    <HTML.p fz='l'>TEXT</HTML.p>
    <Dummy length='xs' lang='ja'/>
    <Dummy length='xl' lang='ja'/>
  </Center>
</Frame>

↓

TEXT

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

リサイズ可能

<Center ar='16/9' ov-y='auto' bd p='20' g='15'>
  <HTML.p fz='l'>TEXT</HTML.p>
  <Dummy length='xs' lang='ja'/>
  <Dummy length='xl' lang='ja'/>
</Center>

こんな時は？

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

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

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

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

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