Content expands container

Question

I have 3 columns page-proofs on div display table. For first here is jsfiddle https://jsfiddle.net/9mzuxza9/2/ Inside left side i placed table with many rows for example and result of it when content inside col become higher than container and container spreads his height but i want that container keep in the same height as screen no content. css

 html,body{
            width: 100%;
            height: 100%;
        }
        .row{
            table-layout: fixed;
            display: table;
            height: 100%;
            width: 100%;
            border: 1px solid grey;
        }
        .left {
            width:300px;
            height:100%;
            display: table-cell;
        }
        .middle {
            height:100%;
            display: table-cell;
            width:100%;
        }
        .right {
            height:100%;
            width:300px;
            display: table-cell;
        }

html

        <div class="row">
        <div class="left"> Some content <table border="1">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <!-- ...more rows-->
                </tbody>
            </table>
        </div>
        <div class="middle"> This should fill the space left </div>
        <div class="right"> Some other content </div>
    </div>

I don't exactly understand what you mean but to hide overflowed content use `overflow: hidden;` on container. To make it scroll, use `overflow: scroll-y;` — cdm, Apr 19 '16 at 07:32
@cdm it seems like that doesn't work with `display: table-cell;` which OP uses — KWeiss, Apr 19 '16 at 07:35

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

You need a fixed height and overflow: scroll. These won't work on a table-cell element, so you will have to do your outer div layout with floating elements or inline-block elements:

div.left {
    float: left;
    overflow: scroll;
    height: 100px; // or whatever
}

Alternatively, leave your div.left as it is and use a separate container div inside it, around the child table. Compare this question: How to create a table cell that scrolls when overflowing

edited May 23 '17 at 11:45

Community

1
1

answered Apr 19 '16 at 07:35

KWeiss

2,954
3
21
37

Do you mean something like this? https://jsfiddle.net/9mzuxza9/3/ but in didn't work too."Container element" spread his height as content. – Sultan Zhumatayev Apr 19 '16 at 08:09
You have to give it a **fixed height**. Example: https://jsfiddle.net/9mzuxza9/4/ – KWeiss Apr 19 '16 at 08:29
Without fixed height is it realizable?because i need "gum" layout. – Sultan Zhumatayev Apr 19 '16 at 08:38
max-height 100% didn't work too(.I thouthg if i put max-height 100% when content become higher than screen parent will show scroll. – Sultan Zhumatayev Apr 19 '16 at 08:41
100% in CSS refers to the parent element, in this case that's the .left div with no fixed height. If you want the display to change based on the window's height, you may have to do it with JS. If you don't tell your CSS at what height to start scrolling, it won't scroll. – KWeiss Apr 19 '16 at 08:49
i didn't want use javascript ,but it seems i should. – Sultan Zhumatayev Apr 19 '16 at 08:57

Content expands container

1 Answers1