i have 2 columns set 50%, left text , right image should fill whole column vertically. problem when text little bigger, there gap below image. possible have image occupy full height (but in same ratio)? example, image wider column, in case 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 @ consequatur deserunt quo repellendus. sequi nulla nemo magni voluptates. nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo, quod reprehenderit omnis! sequi nulla nemo magni voluptates. </p> </div> <div class="col right"> <img src="http://placehold.it/550x250" alt=""> </div> </div>
you have set following css properties image
height:100%; width:auto;
.flex { display: flex; border: 3px solid black; padding: 10px; } .col { border: 1px dashed #aaa; overflow-x: hidden; } .left { padding: 30px; } .right img { height: 100%; width: auto; }<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 @ consequatur deserunt quo repellendus. sequi nulla nemo magni voluptates. nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo, quod reprehenderit omnis! sequi nulla nemo magni voluptates. </p> </div> <div class="col right"> <img src="http://placehold.it/550x250" alt=""> </div> </div>