弹性项目溢出容器

Question

在下面的代码中，Foo 是固定高度的。该栏应垂直占据 space 的其余部分。但是这个条溢出了，垂直占据了更多的剩余部分，并且总是有一个滚动条。

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>

Answer 1

HTML 个元素默认为 height: auto。如果那是您要使用的 space，则需要定义全高。 (more details)

然后您需要从 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>

弹性项目溢出容器

Flex item overflowing container

html

css

overflow

flexbox