.header {
display: flex;
font-family: monospace;
background: papayawhip;
align-items: center;
justify-content: space-between;
margin-left: auto;
}
ul {
display: flex;
background: papayawhip;
gap: 10em;
list-style-type: none;
flex-direction: row;
margin: 0;
padding: 0;
}
Although my header visually resembles the desired outcome, when I reduce the size of the page, the right links/ul (child items) end up overflowing beyond the header (parent).
I suspect that this issue may be related to incorrect flex settings. Could it be a problem with the flex-basis? Or perhaps the interaction between flex-shrink and flex-basis?
I have researched flex settings and attempted to individually add "flex: 1;" to both the parent .header as well as the div.right-links and ul.
I also experimented with creating a separate div... div.header and applying flex: 1 to it in hopes of allowing the parent to expand when the window is resized. However, this did not yield any results.
I find myself perplexed because with "display: flex" on both the .header element and the ul, indicating a flex-shrink value of 1 (flex = 0, 1, auto), shouldn't the links shrink when the parent element resizes rather than overflowing?
I am seeking some guidance or discussion as I have reached a point where I am simply adding code to "experiment", which indicates that I am in need of assistance. Thank you in advance!