CODEWITHSUNDEEP
htmlcssflexboxoverflow
eastwater
eastwater

Reputation: 5542

Flex item overflowing container

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>

Upvotes: 1

Views: 651

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370983

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>

Upvotes: 1

Related Questions