Trying to use CSS flex containers to build a responsive page header. When I resize the page for mobile, the flex container items ignore the flex container and overlay over the rest of the div page tags. I can no longer see the navigation bar.
At the top of the page, I have a contact us link and a My Account link. Directly under this, I have put a Flex Container.
Inside the Flex Container, I have 3 child elements that I would like to display horizontally in a row.
.flex-container { display: flex; justify-content: flex-end; align-items: flex-end; /* flex-flow: row wrap; */ flex-direction: row; flex-wrap: wrap; align-content: center; /* flex-flow: row wrap; */ background-color: #bbdefb; height: 100%; padding: 15px; gap: 5px; } .flex-container > div{ background: #ffecb3; border: 3px solid #ffcc80; border-radius: 5px; padding: 8px; } .itemA { /* flex:1 1 auto; */ flex-grow:2; flex-shrink:1; } .itemB { /* flex:1 1 auto; */ flex-grow:2; flex-shrink:1; } .itemC { /* flex:1 1 auto; */ flex-grow:1; }I end up with the following:(https://i.stack.imgur.com/hCcrK.png)](https://i.stack.imgur.com/hCcrK.png)
