Hide flex items when it overflows the flex parent - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Item

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Item

Description

Hide flex items when it overflows the flex parent

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flexbox Hide Overflow Child Elements</title> 
  <style>

body {<!--from  ww w . j ava 2 s  .  co  m-->
   background-color: #EEF0ED;
}
.grid-parent {
   width: 500px;
   background-color: lightgrey;
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
   max-height: 200px;
}
.grid-item {
   background-color: blue;
   width: 100px;
   height: 100px;
   box-sizing: border-box;
   border: 1px solid red;
}
.grid-item:nth-of-type(even) {
   background-color: lightblue;
}


      </style> 
 </head> 
 <body translate="no"> 
  <section> 
   <p>test test test test test test test test test test test test test test </p> 
  </section> 
  <div class="wrapper"> 
   <div class="grid-parent"> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials