css: reduce un div padre para que se ajuste al ancho de un niño y restringe el ancho del otro niño

Solución:

Vea esta versión editada de su jsFiddle.

Esto es lo que se agrega al CSS:

#container {
    display: table-cell;
}
#child1 {
    display: table-row;
    width: 1px;
}
#child2 {
    display: table-cell;
    width: 1px;
}

La respuesta proporcionada por @Chris me lleva a la siguiente gran solución de mi caso, donde necesito ajustar el contenedor div solo al primer elemento secundario (y dejar el resto de elementos secundarios para que se ajusten automáticamente al ancho del contenedor):

div.container {
    width: fit-content;
    max-width: 100%;
    margin: 16px auto;
    display: table;
}

div.inner-primary {
    display: block;
}

div.inner-rest {
    margin-top: 8px;
    display: table-caption;
    caption-side: bottom;
}

<div class="container">
  <div class="inner-primary"><div style="width:200px; border:1px dotted #ccc; border-radius:4px; padding: 4px;">This is the main element that drives the width of the container.</div></div>
  <div class="inner-rest">This is the first of the rest divs that fit automatically to the container...</div>
  <div class="inner-rest">This is the second element...</div>
</div>

---

---

Utiliza Nuestro Buscador