Solve Unknown Gap Between Elements in Flexbox with HTML5

Unknown gaps between elements in flexbox are due to margin collapsing of the header to the bar division. To resolve this −

• Either Margin is reset to 0 for header or Border is added to the bar.
• Padding can be done to bar by adding property padding: 10px to bar. 

Try the following code snippet to resolve the unknown gap problem −

.bar {
   background: yellow;
   color: gray;
   height: 250px;
   padding: 10px;
   text-align: center;
}