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; }