W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2021

Re: [csswg-drafts] [css-flexbox] Vertical content overflows flex column layout unexpectedly, confusing (#6260)

From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
Date: Mon, 10 May 2021 19:23:08 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-837190156-1620674587-sysbot+gh@w3.org>
What you're running into is the [content-based minimum size](https://drafts.csswg.org/css-flexbox/#min-size-auto). Setting `height: 0` happens to work because it takes the specified size into account, but you can also just set `min-height: 0` as a more direct alternative (since it's the default `min-height: auto` that's causing this behavior).

This is intended behavior, tho I acknowledge it can be confusing. This is a hard trade-off between "flex items sometimes get too big and overflow their container" (current behavior) and "flex items sometimes get too small and their content overflows" (what can happen when you set `min-height: 0`). It was determined that it's better to have overflow due to things getting big, rather than visible overflow from things being too small; it's somewhat easier to find the problematic element in that case.

I haven't downloaded your zipfile yet (consider using a CodePen or similar, so you can just link directly to a testcase), but I presume the flex container is fixed-height? In that case, you'll get overflow no matter what, right? The flexible element in the column needs to be scrollable, then; if it becomes scrollable, that should automatically solve your case as well, since its content-based minimum size is zero then.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6260#issuecomment-837190156 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 10 May 2021 19:23:10 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:27:23 UTC