Resize the content of a flexbox when browser width changes
<p>I'd like the content inside my flexbox to change size when I resize the browser (i.e. words and images shrink proportionally).</p>

<p>Inside the flexbox, I have two elements: some text on the left, and an image on the right.</p>

<pre><code>&lt;div id="flexbox"&gt;
    &lt;div id="text"&gt;
        Some text
    &lt;/div&gt;
    &lt;img src="images/img.png" alt="" id="image" width="400px" height="414px"&gt;
&lt;/div&gt;

#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%;
}
</code></pre>

<p>Right now, the font size and image size stays static, so when I resize the browser, the image eventually gets cut off, and the text expands vertically.</p>