Prevent flex items from overflowing container

Question

I'm trying to create a responsive first page website with multiple items.

This is what I want (the black square is the screen) :

And this is what I have (it is a representation of what I would like to do):

 #main { background-color: purple; overflow: hidden; top: 0; position: absolute; bottom: 0; right: 0; left: 0; } .container { margin-top: 10px; float: left; padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: center; height: 100%; align-items: flex-start; overflow: scroll; } .item1 { background-color: red; margin-right: 20px; width: 100px; height: 100px; } .item2 { background-color: blue; width: 100px; height: auto; margin-right: 20px; color: white; } .item3 { background-color: green; min-width: 100px; max-width: 200px; height: 100%; margin-bottom: 20px; overflow: hidden; } .content { min-height: 400px; overflow: scroll; } 

 <div id="main"> <h2>Hey</h2> <div class="container"> <div class="item1"></div> <div class="item2">Item item item item item item item item</div> <div class="item3"> <div class="content"> <p>This is a paragraph1.</p> <p>This is a paragraph2.</p> <p>This is a paragraph3.</p> <p>This is a paragraph4.</p> <p>This is a paragraph5.</p> <p>This is a paragraph6.</p> <p>This is a paragraph7.</p> <p>This is a paragraph8.</p> <p>This is a paragraph9.</p> <p>This is a paragraph10.</p> <p>This is a paragraph11.</p> <p>This is a paragraph12.</p> <p>This is a paragraph13.</p> <p>This is a paragraph14.</p> <p>This is a paragraph15.</p> <p>This is a paragraph16.</p> <p>This is a paragraph17.</p> <p>This is a paragraph18.</p> <p>This is a paragraph19.</p> <p>This is a paragraph20.</p> <p>This is a paragraph21.</p> <p>This is a paragraph22.</p> <p>This is a paragraph23.</p> <p>This is a paragraph24.</p> <p>This is a paragraph25.</p> <p>This is a paragraph26.</p> <p>This is a paragraph27.</p> <p>This is a paragraph28.</p> <p>This is a paragraph29.</p> <p>This is a paragraph30.</p> <p>This is a paragraph31.</p> <p>This is a paragraph32.</p> <p>This is a paragraph33.</p> <p>This is a paragraph34.</p> </div> </div> </div> </div> 

http://jsfiddle.net/PeAAb/540/

Answer 1

The primary problem is that your third (green) item is set to height: 100% . This means it will take the full height of the container.

Except you also have a margin set.

.item3 {
  background-color: green;
  min-width: 100px; 
  max-width: 200px;
  height: 100%; 
  margin-bottom: 20px;
  overflow: hidden;
}

You also have an h2 taking up height.

So, height: 100% + margin-bottom: 20px + h2 is greater than 100% and causes an overflow.

Try this instead:

.item3 {
  background-color: green;
  min-width: 100px; 
  max-width: 200px;
  height: calc(100% - 40px); 
  margin-bottom: 20px;
  overflow: hidden;
}

That will solve the main problem.

Then, to get the scrollbar to work properly, adjust your overflow rules and add display: flex to .item3 . This triggers full height on the child element which is enough to render a scrollbar.

 #main { background-color: purple; overflow: hidden; top: 0; position: absolute; bottom: 0; right: 0; left: 0; } .container { margin-top: 10px; float: left; padding: 0; margin: 0; display: flex; flex-flow: row wrap; justify-content: center; height: 100%; align-items: flex-start; /* overflow: scroll; */ } .item1 { background-color: red; margin-right: 20px; width: 100px; height: 100px; } .item2 { background-color: blue; width: 100px; height: auto; margin-right: 20px; color: white; } .item3 { background-color: green; min-width: 100px; max-width: 200px; height: calc(100% - 40px); margin-bottom: 20px; overflow: hidden; display: flex; } .content { min-height: 0; overflow-y: scroll; } h2 { height: 20px; margin: 0; } 

 <div id="main"> <h2>Hey</h2> <div class="container"> <div class="item1"></div> <div class="item2">Item item item item item item item item</div> <div class="item3"> <div class="content"> <p>This is a paragraph1.</p> <p>This is a paragraph2.</p> <p>This is a paragraph3.</p> <p>This is a paragraph4.</p> <p>This is a paragraph5.</p> <p>This is a paragraph6.</p> <p>This is a paragraph7.</p> <p>This is a paragraph8.</p> <p>This is a paragraph9.</p> <p>This is a paragraph10.</p> <p>This is a paragraph11.</p> <p>This is a paragraph12.</p> <p>This is a paragraph13.</p> <p>This is a paragraph14.</p> <p>This is a paragraph15.</p> <p>This is a paragraph16.</p> <p>This is a paragraph17.</p> <p>This is a paragraph18.</p> <p>This is a paragraph19.</p> <p>This is a paragraph20.</p> <p>This is a paragraph21.</p> <p>This is a paragraph22.</p> <p>This is a paragraph23.</p> <p>This is a paragraph24.</p> <p>This is a paragraph25.</p> <p>This is a paragraph26.</p> <p>This is a paragraph27.</p> <p>This is a paragraph28.</p> <p>This is a paragraph29.</p> <p>This is a paragraph30.</p> <p>This is a paragraph31.</p> <p>This is a paragraph32.</p> <p>This is a paragraph33.</p> <p>This is a paragraph34.</p> </div> </div> </div> </div> 

Then, to adjust the green item for smaller screens, consider media queries. Something like this:

@media ( max-width: 500px) {
  .item3 { height: 60vh; }
}
@media ( max-width: 300px) {
  .item3 { height: 50vh; }
}

jsFiddle