Why does scrollWidth only include the rest of the padding?

Question

So, I have a #Wrapper DIV that has a fixed width. Inside the DIV, I have another #Panel DIV, which also has a fixed width:

 <div id="Wrapper"> <p>...</p> <div id="Panel">Panel</div> <p>...</p> </div> 

Sometimes the width of the panel is larger than that of Wrapper, and in these cases I would like to extend Wrapper with JavaScript so that it completes the panel perfectly.

Live demo: http://jsfiddle.net/H6rML/

I intended to use .scrollWidth on a Wrapper to determine the width of the panel. However, the problem is that the Wrapper has horizontal padding, and .scrollWidth for some reason only includes the left padding of the wrapper. So:

 Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width 

So, considering:

 #Wrapper { width: 200px; padding: 10px; } #Panel { width: 300px; } 

Wrapper.scrollWidth returns 310px , which is not very useful. If .scrollWidth did not contain spaces and only returned the width of the panel, I could work with this (I would add a manual addition to this value). If both gaskets were turned on, I could handle this as well. But why is only the left addition included? (By the way, this behavior is similar to a cross browser.)

A few additional notes:

• I can not set the width to Wrapper directly. In my actual code, I set the width of the ancestor element that is several levels above Wrapper, and I use a custom API to set the width. That is why I need to get the full value of 320px .

• I need a solution that is independent of the contents of the Wrapper. In my demo, this is a panel, but in other scenarios there may be another element that overflows or even several elements. This is why I went from .scrollWidth to Wrapper.

Is there a way to get the value of 320px without having to manually add the correct padding to the .scrollWidth value?

---

Btw, in accordance with the standard, right filling must be included:

The scrollWidth attribute should return the result of running these steps:

• If the element does not have an associated CSS layout field, return zero and complete these steps.

• If the element is the root element and the Document is not in quirks return max mode (width of the contents of the document, innerWidth value).

• If the element is an element of the HTML body and the document is in quirks return max mode (width of the contents of the document, value innerWidth).

• Returns the computed value of the padding-left property plus the computed value of padding-right plus the width of the content of the element.

Source: http://www.w3.org/TR/cssom-view/

Why don't browsers behave accordingly?

---

To further improve the clarity of my post, let me summarize two main questions:

(1) If the standard states that the correct padding should be included in the .scrollWidth value, then why don't browsers behave accordingly?

(2) Is it possible to get the correct value ( 320px in my case) without having to manually add the correct addition?

---

This question was answered in another thread.

The answer to this question is here: When the child element overflows horizontally, why is the incorrect filling of the parent element ignored?

Answer 1

I'm not sure if I understand correctly, but from what I read, I assume that you want to change the width of #Wrapper based on #Panel. In this case, perhaps you can try the following:

 #Wrapper { display: inline-block; make sure to remove width from #Wrapper } 

Answer 2

Try the following:

 #Wrapper { min-width: 200px; padding: 10px; float: left; } 

or use jQuery

 $(document).ready(function() { var width = jQuery("#Panel").width(); $("#Wrapper").width(width); }); 

Answer 3

You can use jQuery for this:

 $(function() { $("#Wrapper").width($("#Panel").outerWidth()); }); 

This takes into account #Panel padding, margins, etc.

Answer 4

I have no idea why leading browsers have been using this error until today, but here is a demonstration of the problem and an inline-block workaround .

 document.body.innerHTML += 'one.scrollWidth = '+ document.querySelector('.one').scrollWidth +'<br>two.scrollWidth = '+ document.querySelector('.two').scrollWidth +'<br>three.scrollWidth = '+ document.querySelector('.three').scrollWidth +'&nbsp;&nbsp;&nbsp;(fix applied to grand children)<br>four.scrollWidth = '+ document.querySelector('.four').scrollWidth +'&nbsp;&nbsp;&nbsp;(fix applied to direct child)'; 

 .parent{ border:1px solid rgba(50,150,220,1); } .child{ background:rgba(100,200,255,0.3); padding:10px 20px; white-space:nowrap; } .scroll-container{ border:1px solid red; display:inline-block; overflow:hidden; } .two, .three, .four{ width:60px; } .three .child{ display:inline-block; } .four .parent{ display:inline-block; } 

 <div class="scroll-container one"> <div class="parent"> <div class="child">Lorem ipsum dolor</div> <div class="child">Lorem ipsum dolor sit amet</div> </div> </div> <br> <div class="scroll-container two"> <div class="parent"> <div class="child">Lorem ipsum dolor</div> <div class="child">Lorem ipsum dolor sit amet</div> </div> </div> <br> <div class="scroll-container three"> <div class="parent"> <div class="child">Lorem ipsum dolor</div> <div class="child">Lorem ipsum dolor sit amet</div> </div> </div> <br> <div class="scroll-container four"> <div class="parent"> <div class="child">Lorem ipsum dolor</div> <div class="child">Lorem ipsum dolor sit amet</div> </div> </div> <br>