Flexbox - image disappear with column - html

Question

I'm a little bit stuck to be honest. Here is an example of my original code, the problem is that when I change my flex direction from row to column my picture disappears and I don't understand why =>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: rgb(104, 92, 76);
}
.container {
display: flex;
flex-direction: row-reverse;
background-color: black;
max-width: 700px;
margin: 20vh auto;
}
.content {
width: 100%;
}
.text {
color: white;
}
.image {
background: url('https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png');
width: 100%;
}
<div class="container">
<div class="image"></div>
<div class="content">
<div class="text"> Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia corporis repudiandae Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aut
autem molestias debitis unde atque quam at assumenda. Atque sint illo rerum magnam aperiam suscipit commodi repudiandae officia! ipsum dolor sit, amet consectetur adipisicing elit. Fugiat quidem quasi sint culpa et rem quas deserunt labore laboriosam
mollitia. Consequatur lorem minus earum sint eius reiciendis, deleniti id vero sapiente. officiis consequuntur voluptas optio dolore nobis blanditiis adipisci maxime itaque ducimus sit incidunt, eveniet doloremque cupiditate debitis deserunt ad!
elit. Optio nihil officia commodi nostrum iure dignissimos officiis, consectetur, quae minus libero qui hic quis voluptas et quas similique vero neque facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores tenetur, veniam nobis
nulla molestiae recusandae quia a reiciendis corrupti exercitationem delectus iure ducimus ea odio animi cumque et optio eum! </div>
</div>
</div>

Answer 1

Since there is nothing that specifies the height on the <div class="image"></div>, it has a height of 0px. You could set the height to a certain value, like x vh or px,
but I would recommend using the img tag instead:
<img src="https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png"/> in place of <div class="image"></div>.
This way, the width and height are set to the dimensions of the actual image if nothing else is specified.

Answer 2

Your image tag has not an height specified, you need something like this to set the size of the div:
.image {
flex-basis: 200px; // or height: 200px;
}
Otherwise you can use the img tag instead of the background, so you can show the image at his correct dimensions. Remember to set height: auto to the img tag in this case.

Answer 3

A flex item needs either a height setting or content adding (which will determine the height). As the image div has no content or height its height is set to 0.
I don't recommend setting height on flex items as this is contrary to how flex works. You should set a height on the flex container and use flex-basis to set the height of your flex items.
This will allow your flex items to be responsive. If you want the image to have a fixed height you should set it's flex property to flex:0 0 <height>;
.container {
display: flex;
flex-direction: column;
background-color: black;
max-width: 700px;
margin: 20vh auto;
height: 400px;
}
.image {
display: flex;
background: url('https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png');
flex: 1;
}
.content {
flex: 1;
}
.text {
color: white;
}
<div class="container">
<div class="image"></div>
<div class="content">
<div class="text">Hey la bonbone est remplis de cocaine Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia corporis repudiandae Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aut
autem molestias debitis unde atque quam at assumenda. Atque sint illo rerum magnam aperiam suscipit commodi repudiandae officia! ipsum dolor sit, amet consectetur adipisicing elit. Fugiat quidem quasi sint culpa et rem quas deserunt labore laboriosam
mollitia. Consequatur lorem minus earum sint eius reiciendis, deleniti id vero sapiente. officiis consequuntur voluptas optio dolore nobis blanditiis adipisci maxime itaque ducimus sit incidunt, eveniet doloremque cupiditate debitis deserunt ad!
elit. Optio nihil officia commodi nostrum iure dignissimos officiis, consectetur, quae minus libero qui hic quis voluptas et quas similique vero neque facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores tenetur, veniam nobis
nulla molestiae recusandae quia a reiciendis corrupti exercitationem delectus iure ducimus ea odio animi cumque et optio eum! </div>
</div>
</div>