时间戳

首页 > 解决方案 > Flex 项目溢出容器

html - Flex 项目溢出容器

问题描述

在下面的代码中，Foo 是固定高度。条应垂直占用其余空间。但是条溢出来，垂直占用更多的其余部分，并且总是有一个滚动条。

body {
  display: flex;
  flex-direction: column;
}

.foo {
  width: 100%;
  height: 30px;
  border: 1px solid red;
}

.bar {
  width: 100%;
  flex: 1;
  border: 1px solid blue;
}

iframe {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
<div class="foo">
  This is Foo.
</div>
<div class="bar">
  <iframe id="simple" src="simple.html"></iframe>
</div>

标签： htmlcssflexboxoverflow

解决方案

默认情况下是 HTML 元素height: auto。如果这是您要使用的空间，您需要定义全高。（更多细节）

然后您需要从body元素中删除默认边距。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;           /* NEW */
  margin: 0;               /* NEW */
}

.foo {
  flex: 0 0 30px;
  border: 1px solid red;
}

.bar {
  flex: 1;
  display: flex;
  border: 1px solid blue;
}

iframe {
  flex: 1;
}
<div class="foo">This is Foo.</div>
<div class="bar"><iframe id="simple" src="simple.html"></iframe></div>

推荐阅读