Estoy tratando de crear una plantilla de diseño de 3 columnas con una proporción fija por cada columna según el tamaño del puerto de visualización, por lo que 20% para la izquierda, 50% para el contenido del cuerpo central y 30% para la derecha. También he establecido un ancho mínimo y máximo para cada columna en píxeles debajo de los contenedores principales. Pero el problema al que me enfrento es cuando agrego width:400px a la izquierda del niño, ignora el ancho máximo de la izquierda del padre (320 px) y estiro el ancho de la navegación izquierda a 400 px. Esperaba que el elemento secundario respetara el ancho máximo establecido por el padre. ¿Cómo puedo configurar el ancho máximo/mínimo de cada columna para que, independientemente del ancho que coloque en el elemento secundario, respete el porcentaje de ancho y el ancho máximo/mínimo del elemento principal?

 * { outline: 1px red solid; margin: 0; } .parent-wrapper { display: flex; } .parent-left { width: 20%; max-width: 320px; min-width: 256px; } .parent-center { width: 50%; max-width: 1400px; } .parent-right { width: 30%; max-width: 464px; min-width: 384px; } .child-left { background-color: hotpink; width: 400px; /*I don't want this to over-ride max-width of 320px, but it does.*/ }

 <div class="parent-wrapper"> <div class="parent-left"> <nav class="child-left"> <p>Left Nav</p> </nav> </div> <div class="parent-center"> <div class="child-center"> <p>Body Content</p> </div> </div> <div class="parent-right"> <div class="child-right"> <p>Right Panel</p> </div> </div> </div>