補足説明

コンテンツのサイズ制御について

ページのコンテンツエリアが次のような構造をしているとします。

<main>
  <article>
    ...コンテンツ...
  </article>
</main>

ここで、例えばarticle内のコンテンツ幅を800pxにしたい時を考えてみてください。

主に、次の①か②の選択肢があると思います。

/* ① コンテナ自身(コンテンツの親要素)の幅を制御する */
article{
  max-width: 800px;
}

/* ② 各コンテンツ（コンテナの直下要素）の幅を制御する */
article > * {
  max-width: 800px;
  margin-inline: auto;
}

どちらも一長一短ありますが、Lismでは ② の方法を推奨しています。

この②のアプローチによるコンテンツ制御クラスが、is--containerクラスです。
また、②を前提として-max-sz:fullも設計されています。

これはなぜかというと、① のアプローチをベースにした場合、途中で全幅サイズで表示したいコンテンツを作る場合の処理が複雑になってしまうためです。

↓

こういうやつ

コンテンツ…

全幅コンテンツ

コンテンツ…

リサイズ可能

<Container size='s' layout='flow' hasGutter py='40' bd bdc='blue'>
  <Box bd=':guide' py='10'>コンテンツ...</Box>
  <Box max-sz='full' hasGutter bgc='rgb(0 100 200 / 20%)' py='20'>全幅コンテンツ</Box>
  <Box bd=':guide' py='10'>コンテンツ...</Box>
</Container>

②であれば、基本のCSSはmax-width:100%だけでOKで、少しの例外処理を加えれば済みます。

しかし①では、vwなどの単位ではスクロールバーの幅が考慮されないという問題点があったり、汎用性を考慮するとCSSがどんどん複雑化していきます。

ただし、@propertyが有効なブラウザではvwの問題点もほぼ解消されるようになってきました。

そこで、①のアプローチでも実装できるように、Lismでは、-max-sz:outer を用意しています。

↓

例

コンテンツ…

全幅コンテンツ

コンテンツ…

リサイズ可能

<Box hasGutter>
  <Container layout='flow' max-w='s' py='40' bd=':guide' bdc='blue'>
    <Box bd=':guide' py='10'>コンテンツ...</Box>
    <Box max-sz='outer' hasGutter bgc='rgb(0 100 200 / 20%)' py='20'>全幅コンテンツ</Box>
    <Box bd=':guide' py='10'>コンテンツ...</Box>
  </Container>
</Box>