Hacker News Reader

Comment by Dylan16807 | Hacker News Reader

I'm talking about sizes that aren't coming from properties in that specific element. I can see that it's height 20 and I can see that it's not set directly, but how do I know if it's coming from the parent element or a child element, and for the latter how do I know which children/grandchildren/greatgrandchildren are causing it to be that size? And every one of those elements has 100 rules applied because it's a mess I didn't create, so brute force searching is a giant pain.

View on HN

If it makes you feel any better, I must disagree with brundolf here and confirm that figuring out "which of these 1,500 DOM elements is the reason that between 321 to 334px width one of my container divs simply refuses to stay within screen boundaries" can be absolutely maddening and I have no idea how one would ease that process.

Element sizing in CSS is anything but straight forward, especially as there are loads of non obvious rules applied to elements like text inputs etc

But maybe I am just not as good at CSS as I thought :)

I'm also talking about sizes that aren't hardcoded. I don't really know what to tell you except that in my experience the rules governing the sizing of CSS elements don't tend to be very complicated. If you're in a default (block/inline) context, and no width or height is set, then if it's display: block it will be the full width of its parent and its height will be determined by its content. If it's inline or inline-block, its width will also be determined by its content. Flex contexts have their own rules that are a bit more complicated but remain very predictable once you learn them. Etc.

Generally, nearly every element's size comes down to some combination of:

1) Explicit width/height properties (and padding/margin)

2) Special layout mechanisms like filebox or grid

3) The element's contents

4) Its direct parent's dimensions

That's pretty much it. There's really no case I can think of where a grandparent directly drives an element's size (it may drive the parent's size which drives the child's size, but the reach at each individual stage remains short)

I tried to recreate my original full set of grievances, but firefox has changed the CSS around too much.

But I can still go with this:

I inspect the tab toolbar. I pick a tab and look at the contents of the div. Just inside the actual tab div is a "stack" element, whose width is being set to the size of its contents right now.

The stack is size 50.5x44, and it's display:grid.

It has two visible children. Both of them are 50.5x44, and are display: -moz-box.

I can tell from deep inspection and trial and error that one of those children is setting the size, and the other child is inheriting the size.

But if I don't want to dig around every single sub-div, what can I do to figure out which one is which?

They look the same in the layout inspector, and neither of them has any computed properties relative to width.

For bonus difficulty: If the parent div of the "stack" element tries to grow wider than the stack, the stack will grow to match its width, and the child divs of the stack will also grow to match it. All without any computed properties changing, or the layout inspector noting that anything is different.

So the size of the "stack" element could be set by either its parent or one of its children and I have no idea how to figure out which one except by experimentation. This is not a very pleasant experience.

Ideally, I could get a list of every element competing to set the width of a div, and which one(s) are winning. Less ideally, I could see just which element(s) are currently responsible for the size of a div. But as far as I can tell there's nothing, and I have to blindly search every other related element that has a suspiciously similar size.

Reply on news.ycombinator.com