Develop Reference

get witdh of div element (parent overflow hidden)

Get the with of a div which is partly hidden by overflow hidden.
I have a div container which contains 3 divs
the div container is set to flex en only the last div is growing in size so it fills up the space in the container.
The container has the property overflow hidden.
The last div contains dynamic data that wil fill up the div and will be partly hidden. I need to know what the size(width) of the div is within the container.
I tried several methods like offsetwith, clientwidth & getboundingclientrect().width.
All return the width of the div with the hidden part.
I need the width whitout the hidden part.
I created an example on codepen.
https://codepen.io/Babulaas/pen/GObgxb
(I use (angular2) typescript in my project but didnt know how to use this in codepen

you have to get all div elements inside the div with hidden css parameter and just adding up all width of them
Using jQuery
var totalWidth = 0
//this get all div element inside component
$('.component > div').each(function(){
totalWidth += $(this).width()
})
alert('total width of elements inside container "component": ' + totalWidth)
your codepen edited
https://codepen.io/anon/pen/OzJjBo
observation: this work because the inner elements of "component" are inline, you cant get the width of the "component" element adding the hidden part because the hidden part is not part of the width of "component" is part of the overflowed element. the offset method or outerWidth as is called in jQuery get you the width of the element adding the padding, margin and border, not the hidden part because is not part of the element.

How to determine the length and height of a DIV relative to the amount of elements in it?

I try to insert several DIV elements into a main DIV - the amount of elements is dynamic and changes according to the number the user inserts.
My question is how to set the length and width of the DIV so that if I add a number of elements that should already be displayed in a wider view than the DIV then just the size of each element will decrease - but the main DIV size will not change.
I hope the question was understandable - how to insert a dynamic amount of elements (DIV) into the DIV??

By using flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
Set your parent div to display:flex then set your children according to the ratios you need. If you want them all the same, set them all to flex: 1.

Scrollbar on a div should appear only if it has more than 30 items

I have a container div which contains other divs(list items).
The size of this container div should equal heights of 30 items.
If there are more than 30 items in container div, it should stay the same size, but show vertical scrollbar.
Question:
Is there a way to style this container div by CSS so that only after more than 30 list items will be added, the scroll would appear?
Or I have to "hardcode" the height of the container div in CSS which would be list_item*30. Or other possibility: use JavaScript to dynamically change height of
container on initialization depending on list item height. Are these are the only correct
ways to do this?
Thank you.

If every item in the list has the same height "hardcoding" might be the easier way to do this. Just set a height of item_height*30 to the div and have overflow:auto.

Mention CSS height to parent div and overflow-y to scroll.
here i take two divs height for parent div.
Example Here
enter code here
http://jsfiddle.net/2C7qH/

Why is parent showing child's offsetTop value?

I have a div element (parent) which contains another div element (child).
The child element has margin-top : 30px set via CSS. When I calculate the offsetTop of the parent, it reports 30px even if the parent does not have any margin set!
What is more weird is that as soon as I put border on the parent, then offsetTop works as desired. Please see this jsFiddle.
Why does putting a border on the parent alter its offsetTop value?

That's because of margin collapsing
From Mozilla Developer Network :
Parent and first/last child
If there is no border, padding, inline content, or clearance to
separate the margin-top of a block with the margin-top of its first
child block, or no border, padding, inline content, height,
min-height, or max-height to separate the margin-bottom of a block
with the margin-bottom of its last child, then those margins collapse.
The collapsed margin ends up outside the parent.
Use outline property to see what really happens behind the scenes...
Demo

getBoundingClientRect() inside »overflow:scroll«

I would like to compute the actual size of an Element using getBoundingClientRect(). If the Element is inside a container with a given size and overflow:scroll, than result of that method differs.
FIDDLE
How can I always get the total size of the element, no matter if inside a »overflow:scroll« context or not?

The height is always returned correctly, so i believe its the width that you are concerned about. In that case also, your fiddle is giving you the right size of the element.
Here's how -
Remember the rule - The width of the element unless specified will be 100% of the parent.
With the "default overflow" setting you are not setting the width of the parent wrapper and hence according to the rule it takes the 100% width of the parent which going up the chain will be the window width.
With "overflow hidden" and "scroll" you are adding a class "small" to wrapper div which has fixed height and width of 200px. So again applying the rule its width will be 100% of the parent which now is 200px.