CODEWITHSUNDEEP
htmlcss
D T
D T

Reputation: 3746

Why can't display scroll of div?

This is my html and css:

I want display 3 div on 1 line:

i set height of div = 300px

at div 2 i set height:1500px, but it auto expand div and not display scroll:

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>       
           .mainContent {
                display: table;
                width: 100%; /*Optional*/
                table-layout: fixed; /*Optional*/
                border-spacing: 10px; /*Optional*/              
            }
            .col {
                display: table-cell;
                width: 400px;
                overflow: scroll;
                height: 300px;
                border: 3px solid black;
            }

        </style>
    </head>
    <body>
        <div class="mainContent">
            <div class="col">

                part 1
            </div>

            <div class="col">
                part 2
                <div id="resultTable" style="height:1500px;">


                </div>
            </div>
            <div class="col">
                part 3
            </div>
        </div>
    </body>
    </html>

Why can't display scroll of div?

Upvotes: 1

Views: 62

Answers (2)

Sofi Smith
Sofi Smith

Reputation: 172

I think the issue is you're using table layout. If you set your column divs to display:block, and float:left; then you'll get the ability to scroll back.

<style>       
       .mainContent {
            display: block;
            width: 100%; /*Optional*/             
        }
        .col {
            display: block;
            float:left;
            width: 400px;
            overflow: scroll;
            height: 300px;
            border: 3px solid black;
        }
    </style>

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

Try using Flex layout.

.mainContent {
  display: flex;
  flex-direction: row;
  border-spacing: 10px; /*Optional*/              
}
.col {
  min-width: 400px;
  overflow: scroll;
  height: 300px;
  border: 3px solid black;
}
<div class="mainContent">
    <div class="col">part 1</div>
    <div class="col">part 2
        <div id="resultTable" style="height:1500px;">
        </div>
    </div>
    <div class="col">
        part 3
    </div>
</div>

Upvotes: 1

Related Questions