Geek Answers Handbook

Why do these inline block divs wrap up despite their parent having overflow-x: scroll?

In this SSCCE .wrapper , which is the parent, is assigned overflow-x:scroll . All child dvivs are given display:inline-block . I expected the child divs to appear on the same line, and the fifth and sixth .item would not be visible until I scroll to the right.

But instead, the fifth and sixth .item wrapped in the next line. The question is why and what should I do about it?

 * { margin: 0px; padding: 0px; border: 0px none; background: transparent none repeat scroll 0% 0%; font-size: 100%; vertical-align: baseline; } .wrapper { overflow-x: scroll; position: relative; } div.item { /*position:absolute;*/ display: inline-block; width: 25%; height: 25vw; } .wheat { background-color: wheat; } .pink { background-color: pink; } .beige { background-color: beige; } .gainsboro { background-color: gainsboro; } .coral { background-color: coral; } .crimson { background-color: crimson; } .item1 { left: 0%; } .item2 { left: 25%; } .item3 { left: 50%; } .item4 { left: 75%; } .item5 { left: 100%; } .item6 { left: 125%; } .previous-arrow, .next-arrow { width: 30px; height: 50%; top: 50%; position: absolute; display: block; opacity: 0.7 } .previous-arrow { text-align: right; background-image: url(a2.png); background-repeat: none; } .previous-arrow, .next-arrow { opacity: 1; } 
 <div class="wrapper"> <!--<a class="previous-arrow" href="">&lt;</a>--><!-- --><div class="item item1 wheat">a.</div><!-- --><div class="item item2 pink">a.</div><!-- --><div class="item item3 beige">a.</div><!-- --><div class="item item4 gainsboro">a.</div><!-- --><div class="item item5 coral">a.</div><!-- --><div class="item item6 crimson">a.</div><!-- --> <!--<a class="next-arrow" href="">&lt;</a>--> </div>
+2
html css overflow css-position
source share
1 answer

Typically, inline-level mailboxes do their best to avoid overfilling their containers as much as possible. You have a number of inline .item blocks in the .wrapper element. As soon as there is no more space in the current line inside .wrapper for the next inline block, a line break occurs, and the next inline block wraps the next line, and the rest of the elements follow an example. Note that this happens even when there are no inter-element spaces (which you provided using HTML comments).

The overflow value in the container does not affect whether its contents are full; it only changes how it and its contents are displayed when an overflow occurs.

Thus, you must force the inline blocks to actually overflow the container. The easiest way to do this, since you are dealing with a number of inline blocks, is to point white-space: nowrap to .wrapper , which suppresses all the possibilities of line breaking even between inline blocks:

 .wrapper { overflow-x: scroll; position: relative; white-space: nowrap; } 

 * { margin: 0px; padding: 0px; border: 0px none; background: transparent none repeat scroll 0% 0%; font-size: 100%; vertical-align: baseline; } .wrapper { overflow-x: scroll; position: relative; white-space: nowrap; } div.item { display: inline-block; width: 25%; height: 25vw; } .wheat { background-color: wheat; } .pink { background-color: pink; } .beige { background-color: beige; } .gainsboro { background-color: gainsboro; } .coral { background-color: coral; } .crimson { background-color: crimson; } .item1 { left: 0%; } .item2 { left: 25%; } .item3 { left: 50%; } .item4 { left: 75%; } .item5 { left: 100%; } .item6 { left: 125%; } .previous-arrow, .next-arrow { width: 30px; height: 50%; top: 50%; position: absolute; display: block; opacity: 0.7 } .previous-arrow { text-align: right; background-image: url(a2.png); background-repeat: none; } .previous-arrow, .next-arrow { opacity: 1; } 
 <div class="wrapper"> <!--<a class="previous-arrow" href="">&lt;</a>--><!-- --><div class="item item1 wheat">a.</div><!-- --><div class="item item2 pink">a.</div><!-- --><div class="item item3 beige">a.</div><!-- --><div class="item item4 gainsboro">a.</div><!-- --><div class="item item5 coral">a.</div><!-- --><div class="item item6 crimson">a.</div><!-- --> <!--<a class="next-arrow" href="">&lt;</a>--> </div>
+2
source share

More articles:


All Articles