El siguiente código expande correctamente el max-width de un div:

 <div style="display: flex; flex-direction: column;"> <div style="max-width: 500px;"> <div style="background-color: red; height: 20px;"></div> </div> </div>

Resultado:

Sin embargo, cuando configuro cualquier alineación, align-items en el div más primario, align-self en el div max-width , etc., ya no se usará maxWidth y el ancho real se establecerá en 0.
Por ejemplo:

 <div style="display: flex; flex-direction: column;"> <div style="max-width: 500px; align-self: center"> <div style="background-color: red; height: 20px;"></div> </div> </div>

Produce una pantalla en blanco:

¿Cómo alineo el div (en el centro, por ejemplo) y mantengo su ancho intacto? El objetivo no es recurrir al uso de width , porque eso no se ajustará al ancho principal (que puede ser cualquier cosa). Cualquier solución que mantuviera el ancho, pero que no insistiera en tomarlo incluso si no hay espacio, como con width , funcionaría.