CSS column-count: 2 ignored until I use 3 items

Question

I'm using column-count: 2 to split NAV element into 2 columns. In first demo I have 3 buttons and they are correctly split into two columns, but when I use only 2 buttons, they are not split to two columns. They should be side by side but they are under each other. How to make them side by side?

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  background-color: navy;
  width: 200px;
  column-count: 2;
  column-gap: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  width: 100px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<nav><button>First</button><button>Second</button><button>Third</button></nav>

<hr>

<nav><button>First</button><button>Second</button></nav>

Edit: they are correctly side by side in firefox but not in chrome

Answer 1

This solved the issue:

button { display: block; }