I have two columns set to 50%, left with text and right with image that should fill whole column vertically. The problem is that when text is a little bigger, there is a gap below the image. Is it possible to always have the image occupy the full height (but in same ratio)? For example, the image could get wider than its column, in that case I could just set overflow hidden.
.flex { display: flex; border: 3px solid black; padding: 10px;}.col { border: 1px dashed #aaa;}.left { padding: 30px;}<div class="flex"><div class="col left"><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo, quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.</p></div><div class="col right"><img src="http://placehold.it/550x250" alt=""></div></div>