How to create equal width columns in a flex container without content wrapping?

Question

I have a flex container that contains two columns, each with variable amounts of text. I want the columns to have equal width and not wrap, but I can't set a fixed width since the content is flexible.

I have tried setting each column to have flex: 1 1 0, but this causes the longer text to wrap. I have also tried setting white-space: nowrap, but this causes the columns to have unequal widths.

Is there any solution that can achieve both equal width and no text wrapping in this scenario? The solution I'm looking for can't rely on CSS grid.

I have included two code snippets that demonstrate the issues I am facing:

Scenario 1: Text getting wrapped

.flex-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: space-around;
  border-style: solid;
  border-color: red;
}

.column {
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-color: blue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
}

.outer-container {
  justify-content: center;
  display: flex;
}

<div class="outer-container">
  <div class="flex-container">
    <div class="column">
      column A
    </div>
    <div class="column">
      Long Column B
    </div>
  </div>
</div>

Scenario 2: Unequal column widths

.flex-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: space-around;
  border-style: solid;
  border-color: red;
}

.column {
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-color: blue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  white-space: nowrap;

}

.outer-container {
  justify-content: center;
  display: flex;
}

<div class="outer-container">
  <div class="flex-container">
    <div class="column">
      column A
    </div>
    <div class="column">
      Long Column B
    </div>
  </div>
</div>