Version
oat v0.5.0
Description
.card sets overflow: hidden.
Per CSS spec, this causes min-height: auto to resolve to 0 for flex items (instead of the default content-based minimum) (some of the card remains visible due to its padding).
When a .card is a direct child of a height-constrained flex column, flex-shrink: 1 (the default) can compress the card to zero height.
This happens in practice with oat's own sidebar layout: [data-sidebar-layout] constrains main to height: 100dvh via grid-template-rows: auto 1fr, and main is commonly a flex column (e.g. with .vstack).
Reproduction
Make sure the browser window is not too tall, the content has to go beyond the fold for the repro.
<link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
<script src="https://unpkg.com/@knadh/oat/oat.min.js" defer></script>
<body data-sidebar-layout="always">
<nav data-topnav>...</nav>
<aside data-sidebar>...</aside>
<main class="vstack">
<div class="card">
<header>
<h3>Card title</h3>
<p>Card description</p>
</header>
<p>Some content</p>
<footer>
<button>Action</button>
</footer>
</div>
<div class="vstack">
<!-- enough content to exceed viewport height -->
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
<article class="card"><p>Filler</p></article>
</div>
</main>
</body>The first .card collapses to zero height.
The cards inside the nested .vstack appear fine because they are not direct flex children of the height-constrained main.
Workaround
.vstack > .card {
flex-shrink: 0;
}Suggested fix
Either remove overflow: hidden from .card (if it's not needed for a specific reason), or add min-height: min-content to .card so it can't be collapsed below its content size regardless of flex context.
Version
oat v0.5.0
Description
.cardsetsoverflow: hidden.Per CSS spec, this causes
min-height: autoto resolve to0for flex items (instead of the default content-based minimum) (some of the card remains visible due to its padding).When a
.cardis a direct child of a height-constrained flex column,flex-shrink: 1(the default) can compress the card to zero height.This happens in practice with oat's own sidebar layout:
[data-sidebar-layout]constrainsmaintoheight: 100dvhviagrid-template-rows: auto 1fr, andmainis commonly a flex column (e.g. with.vstack).Reproduction
Make sure the browser window is not too tall, the content has to go beyond the fold for the repro.
The first
.cardcollapses to zero height.The cards inside the nested
.vstackappear fine because they are not direct flex children of the height-constrainedmain.Workaround
Suggested fix
Either remove
overflow: hiddenfrom.card(if it's not needed for a specific reason), or addmin-height: min-contentto.cardso it can't be collapsed below its content size regardless of flex context.