Skip to content

[css-flexbox] Vertical content overflows flex column layout unexpectedly, confusing #6260

Closed
@trusktr

Description

@trusktr

If I don't set height:0 to a last item in a flex column layout (while all items have flex-grow:0 except the last item that has flex-grow:1), then the last item's content expands beyond the edge of the layout.

This is confusing, and it was very time-consuming to figure out a solution of setting height: 0 (which doesn't make much sense considering the final height is not 0 but taking up whatever remaining space exists in the layout).

Reproduction, in Chrome:

reproduction.zip

  • In element inspector, find the second element with class live-code-content.
  • In the CSS style inspector, disable the height: 0px style.
  • Notice the content of this element will overflow beyond the bottom edge of the layout.

Is this supposed to happen, or is there a bug?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Closed as Question AnsweredUsed when the issue is more of a question than a problem, and it's been answered.css-flexbox-1Current Work

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions