Closest Positioned Ancestor Width & Height Doesn't Work On Html Tbody

Following is the code for closest positioned ancestors - It works fine. With the same analogy If I try to do that with table - where Table being the container positioned as rela

Solution 1:

Let's start with definition of "Containing Block". CSS 2.2 says

10.1 Definition of "containing block"

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

1. The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.

2. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest ancestor box that is a block container or which establishes a formatting context.

3. If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.

4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

   1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.2, if the inline element is split across multiple lines, the containing block is undefined.

   2. Otherwise, the containing block is formed by the padding edge of the ancestor.

If there is no such ancestor, the containing block is the initial containing block.

In each case, what matters primarily is the contained element, not the containing element. In each of your examples, the contained element is position:static Which means that point 2 above applies.

Which is consistent with your tests, because in each case "child1"'s nearest block container ancestor is the relative, absolute, or fixed parent div.

A tbody, when it is in its normal display mode of table-row-group participates in a table layout. In this instance, its height is defined by its content rows, and not by reference to any containing block or height value. That's why you can't simply make a tbody scrollable.

Setting a tbody to display:block however, means that extra boxes need to be generated to preserve the integrity of the table layout. Anonymous table objects are created like this:

 <table>
    {anonymous table-row box}
       {anonymous table-cell box}
          <tbody style="display:block">
              {anonymous table box}
                  <tr>
                     <td>

Note from 17.2.1 Anonymous table objects that this anonymous objects specifically create boxes.

2. Generate missing child wrappers:

   1. If a child C of a 'table' or 'inline-table' box is not a proper table child, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not proper table children.

   2. If a child C of a row group box is not a 'table-row' box, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not 'table-row' boxes.

   3. If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.

3. Generate missing parents:

   1. For each 'table-cell' box C in a sequence of consecutive internal table and 'table-caption' siblings, if C's parent is not a 'table-row' then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are 'table-cell' boxes.

   2. For each proper table child C in a sequence of consecutive proper table children, if C is misparented then generate an anonymous 'table' or 'inline-table' box T around C and all consecutive siblings of C that are proper table children. (If C's parent is an 'inline' box, then T must be an 'inline-table' box; otherwise it must be a 'table' box.)

      • A 'table-row' is misparented if its parent is neither a row group box nor a 'table' or 'inline-table' box.
      • A 'table-column' box is misparented if its parent is neither a 'table-column-group' box nor a 'table' or 'inline-table' box.
      • A row group box, 'table-column-group' box, or 'table-caption' box is misparented if its parent is neither a 'table' box nor an 'inline-table' box.

The tbody can now be set with a height and overflow. But the containing block rule remains the same: "the nearest ancestor box that is a block container or which establish a formatting context"

And from 9.4.1 Block formatting contexts we know that table-cells are block containers and establish a block formatting context:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

So the containing block of a tbody that is display:block can only be the anonymous table-cell box.

Percentage heights are defined in 10.5 Content height: the 'height' property where it says:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly ..., and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified.

So, since the anonymous table-cell does not and cannot have its height specified explicitly, for a tbody that is display:block and has its specified height as a percentage, its used height must be auto, and therefore obtains its actual height from its content.