Cómo establecer el ancho igual al ancho máximo, incluso el contenido aún no se llena por completo al ancho máximo del div secundario y el div secundario siempre centrado en el padre, pero debe envolver el div secundario (el div secundario tendrá un ancho igual al principal) si el div principal es más pequeño que div niño
* { margin: 0; padding: 0; box-sizing: border-box; } .parent { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px dotted green; } .child { max-width: 400px; height: 100px; padding: 16px; color: white; background: red; } .expected-width { width: 400px; text-align: center; border: 1px dotted blue; margin: 16px 0 0 0; } <div class="parent"> <div class="child">contents</div> <div class="expected-width">expected width</div> </div>Si entendí su pregunta correctamente y desea que su elemento tenga ancho completo aunque esté vacío de contenido, puede hacerlo
.child { max-width: 400px; height: 100px; padding: 16px; color: white; background: red; width: 100%; // setting 100% width with max width will always stretch the element to the max width (if possible) }Si agrega ancho: 100% al niño, obtendrá el mismo ancho
* { margin: 0; padding: 0; box-sizing: border-box; } .parent { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px dotted green; } .child { max-width: 400px; width: 100%; height: 100px; padding: 16px; color: white; background: red; } .expected-width { width: 400px; text-align: center; border: 1px dotted blue; margin: 16px 0 0 0; } <div class="parent"> <div class="child">contents</div> <div class="expected-width">expected width</div> </div>