可以使用CSS Grid：

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
}

.button {
  padding: 10px 20px;
  white-space: nowrap;
  min-width: 130px;
  overflow: auto;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}

<div class="container">
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>

解决方案1（带flex）

• 元素的宽度等于最短元素的宽度

使用flex-basis。
flex-basis属性确定Flex项的初始大小，然后系统在布局过程中分配剩余的空间。
More information-堆栈溢出应答

.flex {
  display: flex;
  width: fit-content;
}

.button {
  flex-basis: 100%; /* HERE (in child element) */
  padding: 10px 20px; 
  white-space: nowrap;
  min-width: 130px;
  width: 100%;
  overflow: auto;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}

<h2>Solution (with 2 elements)</h2>
<div class="flex">
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>

<h2>Solution (with more elements)</h2>
<div class="flex">
  <div class="button button1"># 1 Short Text</div>
  <div class="button button2"># 2 A Long Text Button That Has Greater Width </div>
  <div class="button button1"># 3 Short Text</div>
  <div class="button button2"># 4 A Long Text Button That Has Greater Width </div>
  <div class="button button1"># 5 Short Text</div>
  <div class="button button1"># 6 Short Text</div>
  <div class="button button1"># 7 Short Text</div>
</div>

解决方案2（使用flex和JavaScript）

• 元素的宽度等于最长元素的宽度

使用JavaScript将子元素的宽度设置为最长元素的宽度。

// Get all container
const flexContainers = document.querySelectorAll('.flex')

// Run function to all container
flexContainers.forEach((flexContainer) => {
  // Get all children from current container
  const children = flexContainer.querySelectorAll('.button')
  // Find longest child
  let longestChild = children[0]
  children.forEach((child) => {
    if (child.scrollWidth > longestChild.scrollWidth) {
      longestChild = child
    }
  })
  // Set width of children
  children.forEach((child) => {
    child.style.width = `${longestChild.scrollWidth}px`
  })
})

.flex {
  display: flex;
  width: fit-content;
}

.button {
  flex-basis: 100%; /* HERE (in child element) */
  padding: 10px 20px; 
  white-space: nowrap;
  min-width: 130px;
  width: 100%;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}

<h2>Solution (with 2 elements)</h2>
<div class="flex">
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>

<h2>Solution (with more elements)</h2>
<div class="flex">
  <div class="button button1"># 1 Short Text</div>
  <div class="button button2"># 2 A Long Text Button That Has Greater Width </div>
  <div class="button button1"># 3 Short Text</div>
  <div class="button button2"># 4 A Long Text Button That Has Greater Width </div>
  <div class="button button1"># 5 Short Text</div>
  <div class="button button1"># 6 Short Text</div>
  <div class="button button1"># 7 Short Text</div>
</div>

div {
  display: flex;
  width: fit-content;
}

.button {
  padding: 10px 20px;
  flex: 1;
  white-space: nowrap;
  min-width: 130px;
  width: fit-content;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
  width: 500px;
}

<div>
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>