How to make nested div scrollable when parent is too small on x axis?

I’m trying to have a nested div with a fixed width inside a parent div with a relative width.

The point is, the nested div should always have a fixed width. In case the parent has a smaller width, the nested should have a x-scrollbar and so its visible part would be smaller than its fixed width.

The jsFiddle will help :


<div class="parent">
    <div class="nested">
    012345678901234567890123456789z // 31 ch long


.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;

What I’d like is that the final ‘z’ should always be written on a second line because the nested div should be 30characters long. when you reduced the window width, the visible part of the nested will be smaller but still, the ‘z’ should be on the second line, all the digits on the first line with a scrollbar.

I hope this is clear enough 🙂

Thanks for your help

Source: css

Leave a Reply