How to reduce width of container to children width when "left:0" and "right:0" are used?

Currently, the container is stretched out to max-width, which is 520px. I notice this happens when I applied left:0 and right:0. Reason I used those properties is I would like to bottom center the element(pink container).

The width of child content including padding is 206px, but since min-width is 240px, I would like the width of the pink container to be 240px wide, but pink container is still at 520px. It does not shrink with child content, it just stays at max-width.

How can I make adjustment so that width of pink container adjust according to width of child content? So if child content is 300px, I would like pink container to be 300px wide.

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

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

.parentContainer {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 520px;
  min-width: 240px;
  background-color: pink;
  bottom: 20px;
}

.childContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contentContainer {
  display: flex;
  padding: 20px;
}

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

<div class="parentContainer">
  <div class="childContainer">
    <div class="contentContainer">
      <h4>Hellow World!</h4>
      <button>Click Me</button>
    </div>
  </div>
</div>

<!-- end snippet -->

In order to adjust the parent width according to the child width, you can use width: fit-content for the parent.

Try this code out:

.parentContainer {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  min-width: 240px;
  background-color: pink;
  bottom: 20px;
}