Parent incorrectly calculates the width of their children
Please see the demo: http://jsfiddle.net/7wwobsqq/1/
<div class="parent"> <div class="child"></div> <div class="child"></div> </div> .parent { max-width: 300px; background: grey; overflow: hidden; } .child { float: left; width: 200px; height: 200px; border: 1px solid #000; margin-bottom: 10px; } My problem is that the parent element calculates its width, not paying attention to the fact that the blocks are on different lines.
Then for this example, I would like the parent to narrow down to the maximum block width. In addition, if children can fit on one line, they should be there. To help you understand what I mean, look at the screenshots: http://s21.postimg.org/ioldq2blj/stack_Overflow.jpg
I am currently using ul-> li elements, not divs, as on the jsfiddle page, but in this case their behavior is the same.
Thanks for the comments.
Here are additional examples. In the first case, we see that two elements are aligned. In the second case, the second child moves down because the parent has the maximum width. On the right we got an empty spot. Screenshot - http://s4.postimg.org/p4h4bj86l/stack_Overflow2.jpg http://jsfiddle.net/7wwobsqq/8/ http://jsfiddle.net/7wwobsqq/9/
<ul class="parent"> <li class="child first"> </li> <li class="child second"> </li> </ul> .parent { border: 1px dashed #ccc; float: left; min-width: 333px; max-width: 500px; overflow: hidden; } .child { margin: 2px; float: left; display: inline-block; background-color: rgb(255, 216, 87); } .first { width: 126px; height: 127px; } .second { width: 207px; height: 122px; } Add display: inline-block; in .parent and remove float: left from .child and you will get the expected behavior:
This is why your code is not working:
W3C defines an algorithm for sizing HTML elements. Here .parent is a block level not replaced in the normal thread .
First , the estimated width is calculated ignoring the max-width property. For a block level element, this will be the width of its parent minus fields - in this case, the width of the document body.
If this width is greater than max-width , then max-width becomes width - in this case 300px .
It is so simple. Adding max-width to a div automatically sets the div as such, regardless of content. You can see that in this Fiddle (without content) as well as Fiddle (content overflows the parent element).
This is why my code works:
Adding display: inline-block; in .parent makes it "an inline block, an irremovable element in the normal stream ."
Since there is no specific width, a compressed algorithm is now used, which (true for its name) compresses the container to match its contents.
Your div .parent will always be 100% wide, because that is what happens when you have a display: block element. It will take the width of this parent element. Right now, max-width controls the width of your .parent element, because it wants to fill it with the parent, but it cannot.
You probably need something like this .
Get .parent of overflow: hidden on .parent , this is not necessary.
In addition, you need to set display: inline-block for .parent and .child . This gives you all the style styles for the block element, but says you need it to be on the same line as the siblings.
You probably wanted to ask about this layout (a built-in block has been added to the parent). This is a classic solution to reduce size.
.parent { max-width: 300px; background: grey; overflow: hidden; display: inline-block; } .child { float: left; width: 200px; height: 200px; border: 1px solid #000; margin-bottom: 10px; } .parent:hover .child { width: 120px; } <div class="parent"> <div class="child"></div> <div class="child"></div> </div> Hover over the change.
This behaves this way because there is no loop in the rendering algorithm (which can cause infinite loops, by the way)
Parent stretches, trying to make room for children. When it gets the maximum width, the child moves to the next line, but the width of the parent will not be recounted.