Flex item overflowing container

Question

In the code below, Foo is fixed height. The bar should take the rest of the space vertically. But the bar is overflowing, taking up more the rest vertically, and there is always a scroll bar.

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>

I put the code you were given in a fiddle: http://jsfiddle.net/8b23mnh7/ - Not seeing the issue you are from the code you gave. — rileyjsumner, Aug 01 '18 at 18:36
I think you have to add some reset css like normalize to reset all default margins. — Salmen Bejaoui, Aug 01 '18 at 18:40

Michael Benjamin · Accepted Answer · 2018-08-01T19:08:42.477

1

HTML elements are height: auto by default. You need to define full height if that's the space you want to use. (more details)

Then you need to remove the default margins from the body element.

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>

edited Aug 01 '18 at 19:08

answered Aug 01 '18 at 18:44

Michael Benjamin

346,931
104
581
701

adding height: 100vh; margin: 0; to body did not solve the problem. – eastwater Aug 01 '18 at 19:09
@Sunnyday add `display:block` to iframe and tell me if it fixes your issue with your initial code – Temani Afif Aug 01 '18 at 19:15
@Sunnyday you need to all consider `box-sizing:border-box` for the borders – Temani Afif Aug 01 '18 at 19:24

Flex item overflowing container

1 Answers1