Prevent buttons from overflowing to a new line

Question

I am working on a website and I need a section where buttons are horizontally scrollable rather than vertically scrollable. The issue is that I can only get the buttons to overflow in the vertical direction so it looks like this.

Buttons are overflowing vertically..

I'd like to keep the buttons width at 25% because it would make it uniform with the rest of the site

I've tried floating the buttons, applying overflow-x values, shrinking the div/span (I've tried both) until the second line isn't visible. Also, changing the button's display from inline-block to inline does not fix it, and changing the div/spans display to inline is also not a solution.

* {
  box-sizing: border-box;
}

#button-contianer {
  position: fixed;
  padding: 8px;
  bottom: 0;
  left: 8px;
  width: calc(100% - 16px);
  height: 72px;
  background-color: rgb(125, 205, 231);
  border: 3px solid rgb(18, 171, 222);
  border-radius: 10px;
  font-size: 20pt;
}

button {
  width: calc(25% - 8px);
  height: 50px;
  padding: 0;
  background: none;
  border: 2px solid black;
  margin: 0 4px;
  float: left;
}

<div id="button-contianer">
  <button>2022.01.09</button>
  <button>2022.01.24</button>
  <button>2022.02.05</button>
  <button>2022.02.12</button>
  <button>Should overflow</button>
</div>

Answer 1

Try display: inline-block and white-space: nowrap:

* {
  box-sizing: border-box;
}

#button-contianer {
  position: fixed;
  padding: 8px;
  bottom: 0;
  left: 8px;
  right: 8px;
  background-color: rgb(125, 205, 231);
  border: 3px solid rgb(18, 171, 222);
  border-radius: 10px;
  font-size: 20pt;
  overflow-x: auto;
  white-space: nowrap;
}

#button-contianer button {
  display: inline-block;
  width: calc(25vw - 16px);
  margin-right: 8px;
}

<div id="button-contianer">
  <button>2022.01.09</button>
  <button>2022.01.24</button>
  <button>2022.02.05</button>
  <button>2022.02.12</button>
  <button>Should overflow</button>
</div>