I'm facing an issue where the text inside a flex container does not break correctly when the horizontal space is too small to display it all. But shouldn't it still not break even in the "normal" state?
What mistake have I made here?
(function () {
var el;
el = document.getElementById('clicker');
el.onclick = function () {
el.classList.toggle('container_changed');
return null;
};
}.call(this));body {
background: #333;
}
.container {
width: 100px;
position: relative;
}
.container img {
width: 100%;
height: auto;
}
.container .caption {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
vertical-align: middle;
}
.container span {
color: white;
font-family: 'Nobile', sans-serif;
font-size: 1em;
text-align: right;
}
.container_changed {
height: 200px;
width: 200px;
}
.container_changed img {
width: initial;
height: 100%;
}<div id="clicker" class="container">
<img src="http://www.placebear.com/300/800">
<div class="caption">
<span>Ceci n'est pas un ours</span>
</div>
</div>