Flex 容器收缩到父级高度以下

Question

我目前正在尝试 HTML 对话框，并且偶然发现了有关 Flex 容器约束的问题。

我的HTML如下：

<body>
  <dialog id="dialog">
    <div id="container">
      <div id="header">
        Header
      </div>
      <div id="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      <div id="footer">
        Footer
        </div>
    </div>
  </dialog>
</body>

随附的 CSS 如下所示：

html, body, div {
  margin: 0;
  padding: 0;
  border: 0;
}

dialog {
  display: flex;
  border: 0;
  padding: 0;
  height: 80vh;
  width: 80vw;
  overflow: auto;
}

dialog::backdrop {
  background: #00000080;
}

#container {
  display: flex;
  flex-direction: column;
  border: 4px solid red;
  background: yellow;
}

#container > * {
  margin: 10px;
}

#header {
  background: cyan;
  flex-grow: 0;
}

#content {
  background: red;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 50px;
}

#footer {
  background: magenta;
  flex-grow: 0;
}

如下图所示，当“dialog”元素高于其最小高度值时，一切似乎都按预期工作。

但是，当“dialog”元素达到其最小高度并显示其滚动条时，“#container”div 继续缩小到对话框的高度以下。

需要注意的是，最终的“dialog”元素需要可见的边框，而“#container”div 的设计目的是防止对话框滚动条覆盖边框美感（即“#container”边框被推到一边而不是覆盖）通过“对话框”滚动条）。

请参阅下面的CodePen：

点击此处查看示例

任何建议和/或帮助将不胜感激。

我尝试了各种设置，但说实话，整个机制对我来说似乎完全不直观；我真的陷入困境了。

Answer 1

> in this code the flex container will not shrink from the height of the
> parent.


html, body, div {
  margin:0;
  padding:0;
  border:0;
  height:500px;
}
dialog {
  display: inline-table;
}
#header{
  height: auto;
}
#footer {
  height: auto;
}

Flex 容器收缩到父级高度以下

问题描述投票：0回答：1

1个回答

最新问题

Flex 容器收缩到父级高度以下

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1