Maximum possible size image and div expanding to fill the space
|Added at||2016-12-29 03:12|
I'm sure this has been asked before but I can't find an answer to the exact question.
I want a very simple layout:
[edited to add:]
I've tried using flexboxes and have satisfied the first three constraints, but I can't get the content pane to grow horizontally to fill the space not used by the image. The best results I've got are using the HTML and CSS below but, as you can see in the screenshot below, this results in the content div and the image taking up the same size instead of the content div pushing the image to the right. (This is expected behavior from setting flex=1 on both, so I wasn't expecting it to work; but at least this gives me the image size behaving how I'd like).
What I'm using is at https://jsfiddle.net/uv566jc3/:
I haven't set min-width explicitly on the grid__item item in the jsfiddle, but I don't anticipate that making any difference.
Is there an easy way to get what I want in CSS? Apologies if this is a duplicate.