Reducir la altura de una columna al contenido y estirar la otra a la misma altura

Tenemos un diseño de dos columnas, con una columna azul y una verde. Debe comportarse después de las siguientes condiciones:

¿Hay alguna forma de lograr esto utilizando flexbox u otras técnicas de CSS?

Ejemplo

Puedes hacer esto, donde utilizas una envoltura de posición absoluta en la columna de la derecha, que siempre mantendrá el mismo tamaño que la izquierda, y si tiene mucho contenido, se desplaza

html, body { margin: 0; } .container, .left-column { display: flex; } .left-column { flex: 1; flex-wrap: wrap; background: #69f; } .left-items { flex-basis: calc(50% - 10px); margin: 5px; background: lightgray; } .right-column { flex: 1; position: relative; background: #6f6; } .right-wrapper { position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; background: lightgray; overflow: auto; } 
 
Content will push height here
Content will push height here
Content will push height here
Content will push height here
Content will push height here
Content will push height here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here
Content will scroll here

Puede float: left la columna azul y usa la position: absolute en la columna verde, estableciendo a la right : 0 en ella para que se arrastre a la derecha del contenedor. Para la imagen que usa la altura completa de su contenedor y mantiene proporciones, puede usar un div con background-image y background-position: cover .

Aquí hay un ejemplo de una estructura html simple y su CSS:

HTML

 
Variable height content

CSS

 .col-container { position: relative; width: 100%; height: auto; } .blue-col { background-color: blue; width: 50%; float: left; height: auto; padding: 30px; box-sizing: border-box; } .blue-col-content { background-color: #ccc; height: 500px; } .green-col { position: absolute; top: 0; right: 0; background-color: green; width: 50%; height: 100%; padding: 30px; box-sizing: border-box; } .green-col .img { background-color: #ccc; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('http://sofes.miximages.com/html/porsche-356-outlaw.jpg'); } 

Aquí hay un violín funcional de la solución.