How do I prevent IE11 flexbox from having jumpy buttons on hover?

Question

I have a flexbox layout with buttons. When a user moves the mouse over the buttons, their positions jump around.

My source code is quite simple:

.flexy { 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 200px;
}

<div class="flexy">
  <div>
    Content
  </div>
  <footer>
    <button>Button 1</button> <button>Button 2</button><br/>
    <button>Button 3</button> <button>Button 4</button><br/>
  </footer>
</div>

Moving the mouse between the two rows of buttons causes a lot of movement. Is there a fix I can use to prevent this?

Answer 1

I'm not really sure what's causing the problem. But I found that if you simply add a border to the button the shifting stops.

.flexy { 
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 200px;
}

button {
  border: 1px solid #777;
  padding: 5px;            /* optional */
  margin: 5px;             /* optional */
}

<div class='flexy'>
  <div>
    Content
  </div>
  <footer>
    <button>Button 1</button> <button>Button 2</button><br/>
    <button>Button 3</button> <button>Button 4</button><br/>
  </footer>
</div>

Revised Demo