I am attempting to create a nested div with a fixed width inside a parent div that has a relative width.
The goal is for the nested div to always maintain a fixed width. If the parent div has a smaller width, the nested div should display a horizontal scrollbar so that only a portion of it is visible.
Here is a link to the jsFiddle for reference: https://jsfiddle.net/ycLvc2c8/1/
HTML
<div class="parent">
<div class="nested">
012345678901234567890123456789z // 31 ch long
</div>
</div>
CSS
.parent {
background-color: red;
height: 100px;
padding-top: 10px;
width: 70%;
}
.nested {
width: 30ch;
max-width: 100%;
overflow-x: scroll;
background-color: orange;
font-family: monospace;
}
My objective is to ensure that the final 'z' character is always displayed on a second line because the nested div is set to be 30 characters long. Even when the window width is reduced, the visible area of the nested div should also shrink, but the 'z' must remain on the second line while all other digits are displayed on the first line with a scrollbar.
I hope this explanation clarifies things :)
Thank you for your assistance!