CODEWITHSUNDEEP
htmlcssvertical-alignment
Zout
Zout

Reputation: 924

Vertical Alignment in Absolutely Positioned Element Within Table-Row Gets Incorrect Height In Chrome

I'm having an odd problem with an absolutely positioned element set to 100% height. In Firefox, the element's height becomes that of its parent (which has position:relative) while in Chrome, the element's height extends down past its parent.

.outer
{
  display:table;
  height:150px;
  width:100%;
  position:relative;
  background:gray;
}

.left, .right
{
  position:absolute;
  top:0;
  height:100%;
  background:yellow;
}

.item
{
  display:inline-block;
}

.left
{
  left:0;
}

.right
{
  right:0;
  
}

.helper
{
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

.row
{
  position:relative;
  display:table-row;
  background:orange;
  height:100%;
}
<div class="outer">
  <div class="row">
    <div class="left">
      <div class="helper"></div>
      <div class="item">L</div>
    </div>
    <div class="right">
      <div class="helper"></div>
      <div class="item">R</div>
    </div>
  </div>
  <div>
    <p>Text in here</p>
  </div>
</div>

In Firefox, the yellow L and R divs are the same height as the orange one. In Chrome, they extend down and overlap the gray background div.

Edit: Just tested in IE and Edge, and they have the same behavior as Chrome.

Here is an image of my question in FF (left) and Chrome (right): FF vs Chrome

Upvotes: 1

Views: 69

Answers (1)

Alex W
Alex W

Reputation: 38163

The problem is Chrome is computing the style of your row element to be position:static. The row element's parent (outer element) is set to position:relative however and this allows the absolutely positioned elements, left and right, to take 100% of its height since it is the first positioned parent element.

In my testing, this issue seems to be caused by display:table-row on the row element causing its position property to be computed by Chrome as static. Apparently, the spec leaves this behavior up to the browser to determine which is why you're getting different behavior.

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

Upvotes: 2

Related Questions