Is there a way to make the content within my flexbox adjust in size as I resize the browser window? This means having both words and images shrink proportionally.
My flexbox contains two elements: text on the left, and an image on the right.
<div id="flexbox">
<div id="text">
Some text
</div>
<img src="images/img.png" alt="" id="image" width="400px" height="414px">
</div>
#flexbox {
background-image:url("images/board.png");
width:100%;
display:flex;
flex-flow:row no-wrap;
justify-content:space-between;
}
#text {
margin-left:10%;
width:40%;
}
#image {
margin-right:10%;
}
Currently, the font size and image size are fixed, causing the image to be cut off when resizing the browser, while the text expands vertically. Is there a solution for this issue?