Flex 项目溢出容器

【问题标题】：Flex item overflowing containerFlex 项目溢出容器
【发布时间】：2019-01-09 10:17:56
【问题描述】：

在下面的代码中，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>

【问题讨论】：

我把你给出的代码放在了小提琴中：jsfiddle.net/8b23mnh7 - 从你给出的代码中看不到你的问题。
我认为你必须添加一些像 normalize 这样的重置 css 来重置所有默认边距。
你的代码没有这个问题
已更新。它是栏内的 iframe，而不是简单的文本。

标签： html css flexbox overflow

【解决方案1】：

HTML 元素默认为height: auto。如果这是您要使用的空间，您需要定义全高。 (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>

【讨论】：

添加高度：100vh；边距：0； to body 没有解决问题。
@Sunnyday 将 display:block 添加到 iframe 并告诉我它是否解决了您的初始代码问题
@Sunnyday 你需要考虑box-sizing:border-box 的边界