Geek Answers Handbook

Why is overflow-x adding an addition to my divs?

I have a setting where I have block-display divcontaining inline-block-display divhorizontally. However, if the screen is narrow, I do not want to overflow the text in each div, to break divon the right.

However, when I add overflow-x: hiddento my inline-blocks, it adds an addition to the bottom block div.

Result of HTML / CSS

Notice how in the upper row the gray square passes below the dark boxes, and below the lines? The only difference is that the second line does not have a set of attributes overflow-x.

I tested this on Chrome 39, Chrome 40, and IE 11. This seems to be the desired behavior, but I don't want this. I also do not want to set strict height on divs.

overflow ?

jsFiddle

HTML

<div id="row1">
    <div class="cell">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div class="cell">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div class="cell">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>
<br/><br/>
<div id="row2">
    <div class="cell">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div class="cell">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div class="cell">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>

CSS

#row1, #row2 {
    background: #ddd;
    width: 100%;
}

.cell {
    display: inline-block;
    background: #bbb;
    padding: 6px;
    white-space: nowrap;
    width: 30%;
}

#row1 .cell {
    overflow-x: hidden;
}
+4
2

CSS 2.1 spec:

" " - , , "" , "", .

, overflow-x:hidden, overflow, overflow-x overflow-y, "visible". , , , .

, strut , , , , .

, vertical-align top, , , .

. http://jsfiddle.net/y4t29uwj/2/

+3

... , . :

  • Safari Mac .
  • line-height: 0.5; #row1, #row2 {...} Mac Mac.
0

More articles:


All Articles