Experiencing difficulties with CSS flex layout that are proving challenging to resolve.
HTML:
<div class="image-view">
<div class="info">
<span class="label title">d37ci4x.jpg</span>
<span class="label scale">100%</span>
</div>
<img src="http://i.imgur.com/rfcsACA.png" />
</div>
CSS:
.image-view {
display: inline-block;
border: 1px #000 solid;
}
.image-view .info {
display: flex;
border-bottom: 1px #000 solid;
}
.image-view .info .title {
overflow: hidden;
white-space: nowrap;
flex: 5 1 100%;
}
.image-view .info .scale {
flex: 1 0 1em;
padding-left: 2em;
border-left: 1px #000 solid;
}
Result:
Access the live version at http://jsfiddle.net/omhaohyd/
Facing an issue where the "100%" text is unexpectedly shifting towards the right, extending beyond its container. Attempts to adjust padding have not resolved the issue - although shrinking the container moves the text closer to the left edge, it ultimately becomes too small, causing the text to overflow. Expanding the space allocated to .scale does solve the problem, but introduces excessive whitespace around the "100%", which is not the desired outcome.
This issue has been encountered in Firefox 30.0 on Lubuntu x64.