解决问题：

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/

它们很相似，但是如果你仔细观察，可以看到css中的main和#inside-main以及html中的#wrapper中的更改

简单信息：

main - 视图的一部分
#main-header - 内容标题（示例：固定标题）
#main-content - scrollbox
#inside-main - 无尽的内容

我希望第二种情况就像行为中的第一种情况一样，有人可以告诉我为什么它不一样吗？

感谢您的回复。

我的期望：main有flex: 1，所以它应该调整为其他父级大小，但不知何故#inside-main告诉#main-content调整自身大小（因为它预期在大多数情况......更大的内部div应该将较小的父div重新调整为相同的大小），并且因为#main-content现在比它的父级大，所以它调整了大小，依此类推，但是{{1}不应该忽略它}？

Answer 1

默认情况下，Flex项目的收缩率不能低于其内容的大小。这就是你的内容元素溢出容器的原因。

Flex项目的初始设置为min-height: auto（在列容器中）和min-width: auto（在行容器中）。

要覆盖这些默认设置，请使用除min-height: 0之外的任何值min-width: 0，overflow或visible。

将此添加到您的代码中：

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

有关完整说明，请参阅以下帖子：

内部flexbox及其溢出行为

解决问题：

简单信息：

1 个答案: