2

In my Angular app, I am using Bootstrap, and some elements are generated by the Bootstrap framework. I notice that many of these elements have dimensions auto x auto and this seems to be affecting the behaviour of elements below it (for example, when I set the height to 100% it is not filling the full height of the parent as I would expect)

So what is auto x auto, how does it get set and exactly what effect does it have on the rest of the page ?

DevTools auto x auto

CodyBugstein
  • 21,984
  • 61
  • 207
  • 363
  • auto means there is no explicit value and the content + the nature of the element will define the final value. – Temani Afif Feb 21 '20 at 15:31
  • `auto x auto` just means that the size of the box is determined by content. Unless your parent element has a specific height set, a child with `100%` will not mean anything. – disinfor Feb 21 '20 at 15:32
  • relate (probably a duplicate if only the height:100% is bothering you): https://stackoverflow.com/q/1622027/8620333 – Temani Afif Feb 21 '20 at 15:36

1 Answers1

1

It means that the element does not have the width and height set in css. For a block element, it means that it will have the witdh of the parent and height determined by its content, for an inline element - its dimensions will be determined by its content.

You are not able to set height:100% because the parent element also does not have a height set.

You will be able to set height:100% if the parent element has some explicit height or if its position is absolute.

Roman
  • 904
  • 1
  • 9
  • 19