Why is content overflowing in flexbox?
I am experiencing some behavior that I don't understand. When I set up a list of badges with a max-height on the list and margin on the list items then the content for the list items overflows their containers proportionally to the margin. .badgers { display: flex; flex-direction: column; max-height: 10em; overflow: auto; border: 1px dashed red; } .badge, .title, .location, .timestamp { display: flex; } .badge { flex-direction: column; border: 1px solid black; margin: 1em 0; } <div class="badgers"> <div class="badge"> <span class="title">Title</span> <span class="location">Location</span>