How to make a flexbox container work for multiple elements, but only one is visible

I have a container which can contain several buttons (feasibly up to 3).

I have used flexbox to make my desired layout. In this layout, all buttons are rendered in a line and space-evenly is used to give space between each item. E.g:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.wrapper {
  display: flex;
  justify-content: space-evenly;
  
  width: 500px;
  background-color: grey;
}

button {
  height: 75px;
}

<!-- language: lang-html -->

<div class="wrapper">
  <div id="portalContainer">
    <button>Button 1</button>
  </div>
  <button>Button 2</button>
</div>

<!-- end snippet -->

Due to how my HTML is set up, one of the buttons is wrapped in a div. This div is always rendered even when it does not have content (a button) to go inside it. The reason for this is because this div is the target for a React portal.

In a situation where I do not wish to render Button 1 I still require the wrapping div portalContainer to exist. I cannot get around this.

The issue therefore arises where the portalContainer has no content (no button was rendered into it) but Button 2 renders off to the side. This is due to flexbox still attempting to space the elements evenly, even when one element has nothing inside it. Example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.wrapper {
  display: flex;
  justify-content: space-evenly;
  
  width: 500px;
  background-color: grey;
}

button {
  height: 75px;
}

<!-- language: lang-html -->

<div class="wrapper">
  <div id="portalContainer"></div>
  <button>Button 2</button>
</div>

<!-- end snippet -->

How can I make the solo instance of Button 2 show in the centre of the wrapper, even though portalContainer is still in the DOM?

I looked into the possibility of setting portalContainer as display: none; and then using something like :has(button) to unset that style when the container has a button inside. However :has() does not have Firefox support.

Is there a way of doing this? I cannot apply any logic to rendering the portalContainer - it must always be there.

Full example here in Codepen: https://codepen.io/asos-francesca/pen/qBQKPOX

You can use the :empty pseudo-selector instead, which has greater browser support:

https://caniuse.com/?search=%3Aempty

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.wrapper {
  display: flex;
  justify-content: space-evenly;
  width: 500px;
  background-color: grey;
}

button {
  height: 75px;
}

#portalContainer:empty {
  display: none;
}

<!-- language: lang-html -->

<div class="wrapper">
  <div id="portalContainer"></div>
  <button>Button 2</button>
</div>

<!-- end snippet -->

You can use Javascript to set the display:none to portalContainer only if the conainer doesn't have any childrens.
The next code snippet resolved the problem on CodePen.

<script>
  document.querySelectorAll("#portalContainer").forEach((element) => { if (!element.hasChildNodes()) element.style.display = "none" })
</script>

Keep in mind that id's must be unique in html!