White space: nowrap with flex: 1; child width is too small to accommodate text

Question

I can't find any solution to have 2 equally sized divs fit the text in one line. Looks like whitespace: after I set parent width:fit-content, width is not taken into account now.

They should be as small as possible, always the same size, and do not wrap the text to the second line.

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;
}

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

Answer 1

Can be done using 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>