Within the div, there is text with a 5px margin on the right. When the container div narrows, the text overflows from the container and loses the right margin. Is it feasible to maintain this margin on the right side while allowing the text to overflow from the left side of the container instead of the right? The addition of "display: flex; justify-content: flex-end;" to the box element resolves the issue in Chrome but not in IE 11.
Below is a demonstration:
.box {
margin-bottom: 15px;
margin-left: 30px;
background-color: red;
width: 170px;
white-space: nowrap;
text-align: right;
}
.text {
margin-right: 5px;
}
.box2 {
width: 50px;
}<div class="box box1">
<div class="text">Sample text</div>
</div>
<div class="box box2">
<div class="text">Sample text2</div>
</div>