div not limiting itself to be within the parent

Question

I have a page with a header and a content section

 ------------------
|       Header     |
 ------------------
|                  |
|     Content      |
|                  |
|                  |
 ------------------

I have used flex: 1 1 auto; overflow:hidden; on the content and overflow:display; flex: 0 1 auto; on the header. This all is working fine.

Next in the content i have created 4 <div> each with 25% height.

<div class="content">
            <!--first row-->
            <div class="myrow">
                <div class="colsolid">Johnson </div><!--
                --><div class="col">Coke</div><!--
                --><div class="colsolid">Nissan</div><!--
                --><div class="col">Pepsi</div>
            </div>

            <!--second row-->
            <div class="myrow">
              <div class="colsolid">Johnson </div><!--
                --><div class="col">Coke</div><!--
                --><div class="colsolid">Nissan</div><!--
                --><div class="col">Pepsi</div>
            </div>

            <!--third row-->
            <div class="myrow">
              <div class="colsolid">Johnson </div><!--
                --><div class="col">Coke</div><!--
                --><div class="colsolid">Nissan</div><!--
                --><div class="col">Pepsi</div>
            </div>

            <!--forth row-->
            <div class="myrow">
              <div class="colsolid">Johnson </div><!--
                --><div class="col">Coke</div><!--
                --><div class="colsolid">Nissan</div><!--
                --><div class="col">Pepsi</div>
            </div>          
        </div>

relevant css

.myrow{
height:25%;
background-color: red;
align-items: center;
border-width: 1px;
border-style: solid;
}

.col{
    background-color: green;
    display:inline-block;
    border-style: solid;
    border-width: 1px;
    width: -webkit-calc(25% - 2px);
    width:    -moz-calc(25% - 2px);
    width:         calc(25% - 2px);
}

.colsolid{
    background-color: black;
    color: white;
    display:inline-block;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    width: -webkit-calc(25% - 2px);
    width:    -moz-calc(25% - 2px);
    width:         calc(25% - 2px);
}

The issue is that the myrow are not limiting to be 25% of the content div. Instead its 25% of the full page height. Any ideas?

Here is the fiddle link

score 2 · Answer 1 · edited May 23 '17 at 11:54

2

There's no such thing as overflow: display. That value doesn't exist (MDN).

Also, when you give an element a percentage height, Chrome and Safari require that a height be specified on the parent element. Several containers in your HTML structure are missing a defined height, so height: 25% on .myrow elements may not work.

More details here:

UPDATE (based on feedback in the comments):

On your live site, try this:

Remove height: 100% from .content. (height: 100% on .content plus the navbar height exceed 100% and will cause overflow.)
Make .content a flex container: give it display: flex and flex-direction: column. This will make all .myrow elements flex items.
Remove height: 8.33% from .myrow flex items. This isn't necessary anymore. Just give .myrow a flex: 1 rule. This will distribute container height equally among the 12 items.
Finally, add min-height: 0 to .myrow. This overrides the default min-height: auto on flex items, which prevents them from shrinking past the size of their content (details).

edited May 23 '17 at 11:54

Community

1
1

answered Apr 13 '17 at 01:12

Michael Benjamin

346,931
104
581
701

seems to be working in your fiddle but not in my code.... the only difference is that i split up the css files.. – codeNinja Apr 13 '17 at 01:35
post more details or a link to a live site so we can reproduce the problem – Michael Benjamin Apr 13 '17 at 01:36
here is the link to the site http://actionmary.com/newSite/friends.html – codeNinja Apr 13 '17 at 01:45
notice that the last row is getting cut. All 12 rows should have fit on the screen. – codeNinja Apr 13 '17 at 02:32
@michaek_B that made it worse. Take a look now. – codeNinja Apr 13 '17 at 03:32
That's apparently caused by the `::before` pseudo-element on `.colsolid`. If you remove the `height: 100%` on the pseudo, the text is visible again. However, it messes up the row height. – Michael Benjamin Apr 13 '17 at 04:03
yes you are right i just tried that. Any idea how to resolve the height issue? – codeNinja Apr 13 '17 at 04:08
that too `content: ''` causes the text to go away. Buts its also what causes the height issue to be addressed in the `::before` blocks – codeNinja Apr 13 '17 at 04:13

div not limiting itself to be within the parent

1 Answers1