html - 内部 flexbox 及其溢出行为

Question

第一件事:我不是前端程序员，但有时唯一的方法就是成为一个。

所以我在考虑 flex 或 flexbox 的行为。可能我使用它的方式不好，如果是这样，请告诉我。谢谢。

问题:

我尝试使用 flexbox 编写基本布局，但我发现了一个问题。老实说，我不知道这是一个错误还是我的期望太高，但我希望下面这些案例的行为相同。

https://jsfiddle.net/bargl_vojtech/upvb1Lgk/7/
https://jsfiddle.net/bargl_vojtech/h7eokuua/1/
https://jsfiddle.net/bargl_vojtech/q0kegr8o/1/

它们很相似，但是如果你仔细观察，你会发现 main 和 #inside-main 在 css 和 #wrapper 中的变化在 HTML 中

简单信息:

• main - View 的一部分
• #main-header - 内容标题(例如:固定标题)
• #main-content - 滚动框
• #inside-main - 无尽的内容

我希望第二种情况在行为上与第一种情况一样，有人能告诉我为什么不一样吗？

感谢回复。

My expectation: main has flex: 1, so it should be resize to rest of parent size, but somehow #inside-main tells #main-content to resize itself (because it expected in most cases... bigger inner div should resize smaller parent div to same size), and because #main-content is now bigger than its parent it resize him, and so on, but should not this be ignored by overflow: hidden/scroll?

Answer 1

默认情况下， flex 元素不能缩小到其内容的大小以下。这就是您的内容元素溢出容器的原因。

flex 元素的初始设置是min-height: auto(在列容器中)和min-width: auto(在行容器中)。

要覆盖这些默认值，请使用 min-height: 0、min-width: 0 或 overflow 以及除 之外的任何值可见。

将此添加到您的代码中:

main {
  background-color: red;
  flex: 1;
  overflow-y: auto; /* NEW */
}

有关完整说明，请参阅这些帖子:

• > Why doesn't flex item shrink past content size?
• > min-width rendering differently in flex-direction: row and flex-direction: column