Flexbox items alignment with same height & item aligment - html

Question

I have a simple layout with image on Left and Title of blog on right with light grey background for large screen or were width is minimum 800px. for smaller screens it should show image on top and Title below image. It is working fine except two thing
It show extra space under image which is shown as yellow background in this case.
I want Title Item to be same height as Image element with light grey background, in this case which is represented as red.
.flex-container {
display: flex;
align-items: stretch;
flex-direction: row;
border: 1px solid blue;
height: 100%;
}
.flex-container>div {
background-color: yellow;
color: #555;
width: 50%;
height: 100%;
margin: 0px;
text-align: center;
align-self: center;
font-size: 30px;
}
.title-wrapper {
background-color: #f00 !important;
}
.imgx {
width: 100%;
}
#media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
.flex-container>div {
width: 100%;
margin: 0px;
}
.imgx {
width: 100%;
}
}
<div class="flex-container">
<div class="image-wrapper"><img class="imgx" src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
<div class="title-wrapper">This is the title</div>
</div>

Answer 1

To avoid the gap under the image, 2 classical options :
reset vertical-align: to top or bottom
or reset display to block.
To center content inside the second box, make it also a grid or flex box
Possible fix :
.flex-container {
display: flex;
flex-direction: row;
border: 1px solid blue;
height: 100%;
}
.flex-container>div {
background-color: yellow;
color: #555;
width: 50%;
text-align: center;
font-size: 30px;
}
.flex-container .title-wrapper {
background-color: #f00;
display:flex;
align-items:center;
justify-content:center;
margin:0;
}
.imgx {
width: 100%;
display:block;
}
#media (max-width: 800px) {
.flex-container {
display:grid;/* or block*/
}
.flex-container>div ,
.imgx {
width: 100%;
}
}
<div class="flex-container">
<div class="image-wrapper"><img class="imgx" src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
<div class="title-wrapper">This is the title</div>
</div>

Answer 2

To get rid of the space beneath the image, the image needs to be display: block, then to make the title full height and still aligned centre, you need to remove the height and then make the title itself flex and use align and justify on it (see comments in css below):
.flex-container {
display: flex;
align-items: stretch;
flex-direction: row;
border: 1px solid blue;
height: 100%;
}
.flex-container>div {
background-color: yellow;
/* remove height from here */
color: #555;
width: 50%;
margin: 0px;
font-size: 30px;
}
.title-wrapper {
background-color: #f00 !important;
/* add the following to here */
display: flex;
justify-content: center;
align-items: center;
}
.imgx {
width: 100%;
display: block; /* add this */
}
#media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
.flex-container>div {
width: 100%;
margin: 0px;
}
.imgx {
width: 100%;
}
}
<div class="flex-container">
<div class="image-wrapper"><img class="imgx" src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
<div class="title-wrapper">This is the title</div>
</div>

Answer 3

you have to remove height and align-self in .flex-container > div
.flex-container > div {
background-color: yellow;
color: #555;
width: 50%;
margin: 0px;
text-align: center;
font-size: 30px;
}
are you sure to use align-self or did you mean align-items and justify-content?