CODEWITHSUNDEEP
htmlcssflexbox
waitingforthestorm
waitingforthestorm

Reputation: 95

Container height not expanding to fit content resulting in overflow

I tried to work with flexboxes but am having trouble with it.

This is how it should look:

This is how it should look.

As soon as the display is too small, the content either overflows the nested flexbox or (while I tried to fix it myself) the nested flexbox overflows the main flexbox.

Bug:

Bug

html,
body,
.viewport {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}

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

header,
article,
section,
footer {
  padding: 2em;
}

header {
  background-color: red;
}

article {
  background-color: aqua;
  -webkit-flex: 1;
  flex: 1;
}

section {
  background-color: yellow;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.offer {
  background-color: cornflowerblue;
  border: 1px solid black;
}

footer {
  background-color: forestgreen;
}
<header>
  Header
</header>
<article>
  Article
</article>
<section>
  <div class="offer">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentes</div>
  <div class="offer">O2</div>
  <div class="offer">O3</div>
</section>
<footer>
  Footer
</footer>

Upvotes: 3

Views: 5759

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 370993

If you want the container to expand with the content, then don't use a fixed height.

Use min-height instead.

jsFiddle demo

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* allows container to expand with growing content */
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}
body > * {
  padding: 2em;
}
header {
  background-color: red;
}
article {
  flex: 1;
  background-color: aqua;
}
section {
  display: flex;
  flex: 1;
  background-color: yellow;
}
.offer {
  background-color: cornflowerblue;
  border: 1px solid black;
}
footer {
  background-color: forestgreen;
}
<header>Header</header>
<article>Article</article>
<section>
  <div class="offer">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentes</div>
  <div class="offer">O2</div>
  <div class="offer">O3</div>
</section>
<footer>Footer</footer>

Upvotes: 3

Alyssa Hope
Alyssa Hope

Reputation: 116

I'm not sure if this is what you were looking for, but you could add "flex-wrap: wrap; " to the .section (yellow background). That will cause the boxes to stack vertically when they don't have enough space, and keep all of your content inside of the correct borders. The default setting for wrapping is no wrap, which is why your content squishing together like that.

Upvotes: 0

Related Questions