How to get a basic Flexbox Layout (Like That of a 2x TD Table)?

Issue

(NOTE: There's a bit of backstory here about how I used to get this effect; feel free to skip to the bold text at the end if you don't care.)

Back in the dark old days, if you wanted to have an image with a variable width, and some text next to it, you would just do it with a table:

<table>
  <tr>
    <!-- This TD will magically grow to fit its image -->
    <td><img src="someImage.png"/></td>

    <!-- This TD will magically grow to fill the remaining space -->
    <td>Lorem ipsum ...</td>
  </tr>
</table>

However, in modern web design we should be using CSS not tables, and I know how to get a similar effect by using float: left on both the image and the text.

But, float is passe now too, and everyone uses (wrapping) flexboxes for layouts. However, when I do:

<div style="display: flexbox; flex-wrap: wrap;">
  <div><img src="someImage.png"/></div>
  <div>Lorem ipsum ...</div>
</div>

My text div appears below my image div. I can fix this by putting explicit max-width styles on both, but then my text <div> no longer fills the space left by the image (eg. if I have a smaller image, I wind up with a bunch of whitespace).

My question is: how can I create a flexbox of an image side-by-side with some text ... but have the two "columns" of the flexbox adjust themselves so that the image column is as wide as the image, and the text column is as wide as "whatever space is left"?

Solution

In order to achieve this you just need to use flex-wrap:nowrap it will force the flex items into a single line giving full width to the image and rest to the text. Below are two codes

1. with nowrap

<div style="display: flex;flex-wrap: nowrap;">
    <div><img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div style="display: flex;flex-wrap: nowrap;">
    <div><img src="https://www.imaging-resource.com/?ACT=44&fid=17&d=5221&f=zimg_1447.jpg"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div style="display: flex;flex-wrap: nowrap;">
    <div><img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/88/Vegeta_Dragon_Ball.jpg/220px-Vegeta_Dragon_Ball.jpg"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

2.with wrap

<div style="display: flex;flex-wrap: wrap;">
    <div><img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div style="display: flex;flex-wrap: wrap;">
    <div><img src="https://www.imaging-resource.com/?ACT=44&fid=17&d=5221&f=zimg_1447.jpg"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div style="display: flex;flex-wrap: wrap;">
    <div><img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/88/Vegeta_Dragon_Ball.jpg/220px-Vegeta_Dragon_Ball.jpg"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answered By - Ac_mmi