I recently started learning flexbox and I'm having trouble understanding it.
My header is somewhat responsive, and when I resize my browser window, it adjusts very well. However, the container below with flex-direction: column behaves strangely (try resizing yourself), as it goes off my screen while the elements inside remain in their places. If I set it to flex-direction: row, it works just like the header.
Any suggestions on how to fix this?
Here's the link to the project: https://codesandbox.io/s/dazzling-cerf-qbbwi?file=/index.html
<style>
header {
width: 100%;
background: #669966;
height: 81px;
display: flex;
justify-content: center;
box-shadow: -2px 8px 15px 0 rgba(0, 0, 0, 0.29);
}
.container {
width: 1400px;
margin: 0 auto;
}
.header-wrap {
width: 1400px;
display: flex;
justify-content: space-between;
align-items: center;
height: 81px;
overflow: hidden;
padding: 0 50px;
}
.menu {
width: 500px;
display: flex;
justify-content: space-between;
}
.menu li {
display: inline;
font-family: Open Sans;
font-size: 18px;
line-height: 25px;
color: #DFDFDF;
}
...
</div>
<