[[Tailwind CSS]]でレイアウトを組んでいるときによくハマるポイントと解決法のまとめ。実質[[CSS]]のトラブルシューティングだが、class指定で毛色が異なるため別に作成。
## ウィンドウサイズの縦を短くすると要素が潰れる
```html
<template>
<div class="flex flex-col justify-center items-center gap-4 h-screen">
<div class="text-4xl">start</div>
<div class="bg-red-300 size-16"></div>
<div class="bg-green-300 size-16"></div>
<div class="bg-blue-300 size-16"></div>
<div class="text-4xl">end</div>
</div>
</template>
```
上下中央のこういうレイアウト。
![[2026-01-17-06-41-06.avif]]
ウィンドウの縦を短くすると間のコンテナが潰れる & 中途半端なスクロール領域が出る。
![[2026-01-17-06-41-48.avif]]
`h-screen` を `min-h-screen` にする。上下に隙間が欲しければ `py-12` などpaddingを入れれば良い。
```html
<template>
<div class="flex flex-col justify-center items-center gap-4 min-h-screen py-12">
<div class="text-4xl">start</div>
<div class="bg-red-300 size-16"></div>
<div class="bg-green-300 size-16"></div>
<div class="bg-blue-300 size-16"></div>
<div class="text-4xl">end</div>
</div>
</template>
```