How can I horizontally center align a flexible-width div element?
<div class="outer">
<div class="inner"> ...this content will grow or shrink while on items changed... </div>
</div>
.outer {
height: 500px;
position: relative;
background-color: gray;
}
.inner {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
border: 1px solid blue;
}
The current setup centers the div.inner horizontally, but its max width is constrained to 50% of the parent div.outer. Is there a way to allow for more flexibility in the max width as the content grows?
Additional requirements:
- I prefer not to set a fixed or minimum width for
div.inner - I am aware that setting "max-width" does not achieve the desired result
Any suggestions would be greatly appreciated!