CSS - Fixed border width change when resizing browser window

Question

I made 2 simple link buttons that are located within 2 div tags.

This is the css and html code I tried:

 .lang-box { position: absolute; bottom: 60px; left: 2%; z-index: 3; } .flex-container { display: flex; } .flex-direction-column { flex-direction: column; } .border-gold { border: 2px solid #ac8b45; } .text-gold { color: #ac8b45; } .background-gold { background-color: #ac8b45; } .text-black { color: #000; } .no-background { background-color: transparent; } .lang-a-button { text-decoration: none; outline: 0; display: block; font-size: 20px; padding-bottom: 6px; padding-top: 10px; padding-left: 6px; padding-right: 6px; height: auto; text-align: center; } .lang-a-button:hover { text-decoration: none; opacity: .7; } 

 <div class="lang-box"> <div class="flex-container flex-direction-column border-gold"> <a href="/en" target="_self" class="lang-a-button no-background text-gold" title="Change to English">EN</a> <a href="/" target="_self" class="active_lang lang-a-button text-black background-gold" title="Cambia in Italiano">IT</a> </div> </div> 

And this is the final result:

The problem is that the right border of .border-gold changes in thickness when I resize the browser screen:

I don't understand why this happens. I tried to use this but nothing changes.

I use Google Chrome v69 for testing.

Do I need to add something?

Answer 1

Try add links flex-grow:0; flex-shrink:0; flex-grow:0; flex-shrink:0; and fixed width, like this:

 * { box-sizing: border-box; } .lang-box { position: absolute; top: 60px; left: 2%; z-index: 3; width: 42px; } .flex-container{ display: flex; width: 100%; } .flex-direction-column{ flex-direction: column; } .border-gold{ border: 2px solid #ac8b45; } .text-gold{ color: #ac8b45; } .background-gold{ background-color: #ac8b45; } .text-black{ color: #000; } .no-background{ background-color: transparent; } .lang-a-button{ text-decoration: none; outline: 0; display: block; font-size: 20px; padding-bottom: 6px; padding-top: 10px; /* padding-left: 6px; padding-right: 6px; */ height: auto; text-align: center; width: 100%; flex-grow:0; flex-shrink:0; width: 40px; } .lang-a-button:hover{ text-decoration: none; opacity: .7; } 

 <div class="lang-box"> <div class="flex-container flex-direction-column border-gold"> <a href="/en" target="_self" class="lang-a-button no-background text-gold" title="Change to English">EN</a> <a href="/" target="_self" class="active_lang lang-a-button text-black background-gold" title="Cambia in Italiano">IT</a> </div> </div> 

I do not have an exact answer but i think that this is because of the peculiarity flex & flex-direction: column . Even when we set the fixed width of the element inside flex block, it does not always take it into account. Therefore, for blocks with a fixed width, you need to additionally specify flex-grow: 0; flex-shrink: 0; flex-grow: 0; flex-shrink: 0; .

So ... for flex-direction: column ... add fix width for wrap & inner links.