Skip to content

[css-flexbox][css-overflow]Where is the relationship between flexbox and overflow defined? #5812

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hgl opened this issue Dec 21, 2020 · 2 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-flexbox-1 Current Work

Comments

@hgl
Copy link

hgl commented Dec 21, 2020

I wonder where is the relationship between flexbox and overflow defined? I skimmed both flexbox 1 and overflow 3 editor’s drafts, couldn’t find the answer.

Specifically, I’m trying to understand this behavior: in a single-line column flex container whose first child has flex:none, whether or not the second flex: 1 child, which has long content, overflows the flex container, seems to depend on if it has a non-’visible’ overflow.

Currently, it has the same height as its content under ‘visible’, but I expect it to have the same height as the available flex space, not as its content, and only its content overflows. Isn’t that how overflow: auto could work in the first place?

Would love to find the part where this is explained.

@Loirooriol
Copy link
Contributor

That would be https://drafts.csswg.org/css-flexbox-1/#min-size-auto

To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.

The overflow property defines whether the flex item will be a scroll container.
You can also use min-height: 0 if you don't want the automatic minimum size, but don't want to turn the flex item into a scroll container.

@Loirooriol Loirooriol added Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-flexbox-1 Current Work labels Dec 21, 2020
@hgl
Copy link
Author

hgl commented Dec 21, 2020

I kept having maximum width in mind when looking for the explanation, but now it totally makes sense. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-flexbox-1 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants