Behold the current appearance of my window: https://i.sstatic.net/iIxDS.png
Despite my efforts to maintain proper sizing, when I shrink the screen, the text (with white-space set to nowrap) ends up looking like this:
https://i.sstatic.net/uXqox.png
Is there a way to ensure that the div will always be larger than the text? I want each div element to adjust its size based on the word it contains, like making "BnS" have a smaller div than "University Visit."
Below is my CSS code for the element:
.event-nav {
display: flex;
flex-direction: row;
justify-content: flex-start;
overflow-x: auto;
}
.event-nav-item {
margin: 0px 5px;
padding: 5px;
min-width: 50px;
width: auto;
text-align: center;
white-space: nowrap;
}