如何在vue.js中强制按钮保持在一行中？

<template>
  <div class="button-container">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
  </div>
</template>

<style>
.button-container {
  display: flex;
  flex-wrap: nowrap; /* 禁止换行 */
}
</style>

<template>
  <div class="button-container">
    <button class="float-button">按钮1</button>
    <button class="float-button">按钮2</button>
    <button class="float-button">按钮3</button>
    <div class="clearfix"></div>
  </div>
</template>

<style>
.button-container {
  overflow: hidden; /* 清除浮动 */
}

.float-button {
  float: left;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>