Iframe overflow takes a new line instead of a scroll bar

I created a web site that shows the directory list in the server. In backend all the directories are getting indexed and shown in an another webpage called dirpage. So I used an iframe in mainpage to show the content of dirpage. The mainpage and dirpage are working great. But when the dirpage is shown in the iframe, the content overflows. The iframe width is limited to the <div> width. The problem is the iframe overflow is taking a new line to show the content. Here is the main page.

<head>
<style>
    #divmain{
        display: flex;
        flex-direction: row;
    }
    #div1{
        background: rgb(244, 236, 225);
        width: 30%;
        height: 600px;
        float: left;     
    }
    #div2{
        background: black;
        width: 70%;
        height: 600px;
        float: right;
    }
    #button1{
        height:44px;
        width:50px;
        float:left;
    }
    #button2{
        height:44px;
        width:50px;
        float:left;
    }
    #input1{
        display:none;
        float:right;
        width:295px;
        height:44px;
    }
    #iframe1{
        height:500px;
        width:390px;
        background: transparent;
        overflow: scroll;
    }
   
</style>
</head>

<body onmousedown="buttonclick1(event)">
    <h1>online storage</h1>
    <div id="divmain">

        <script>        
            function buttonclick1(e){
                if (e.target.id !== "input1")
                    document.getElementById("input1").style.display="none"                    
            }
            function buttonclick2(e){
                if (e.target.id == "button1")
                    document.getElementById("input1").name="folder" 
                if (e.target.id == "button2")
                    document.getElementById("input1").name="file"                     
            }         
        </script>

        <div id="div1">
            <hr style="margin-top:0;">
            <button id="button1" onclick="document.getElementById('input1').style.display='block'" onmousedown=buttonclick2(event)><a>Folder</a></button>
            <button id="button2" onclick="document.getElementById('input1').style.display='block'" onmousedown=buttonclick2(event)><a>File</a></button>
            <form id="form1" action="session" >
                <input id="input1" type="text" name="">
            </form><br><br>      
            <hr style="margin-top:10px;"><br>

            <iframe id="iframe1" src="dirpage.html">
            </iframe>
        </div>
        

        <div id="div2">  
        </div>  
    </div>    
</body>

Here is an image of dirpage and mainpage. I can't add the code of dirpage. because the content are very sensitive. It doesn't contain anything other than <p> paragraphs and buttons.

Now what I need to do is show the overflown content with a scroll bar. Not with a newline. I tried overflow: scroll. But It's not working. Any help would be greatly appreciated.

Solution

From what I understood, your problem is that the iframe is not expanding by width and thus instead of staying on one line when exceeding the width it's creating a new line?

EDIT: Ok after testing your page here's what I found. Initially after starting with a plaintext, it had css from the browsers that gave the text a <pre> tag with a white-space: pre-wrap; style, your problem can be fixed by removing the pre-wrap style from the css, the problem is you can only edit it from the Inspect Element menu. On the other hand, after trying with an html file instead of a txt file, the "line break" only happens after adding a spacebar to the text, which is expected. I'll see what I can do from here but I thought I would update to as opposed to keeping you waiting.