Chrome (63.0.3239.84) ignore height 100% for td elemnt

Maksim Ryzhikov

unread,

Dec 31, 2017, 3:08:51 AM12/31/17

to Chromium-discuss

In the latest version of Google Chrome, td element ignore height 100% and occupies height equal to td's content.

Firefox and Safari take maximal height which equals heigh of maximal td.

OS: macOS High Siera

Chrome: Version 63.0.3239.84 (Official Build) (64-bit)

Example on jsbin which reproduces the problem:

https://output.jsbin.com/kegelid

Thanks!

HTML

<body>

<div id="app">

<table id="table">

<tbody>

<tr id="row">

<td id="td">

<div id="dzone">

<i class="b"></i>

</div>

</td>

<td id="td">

<div id="dzone">

<i class="b"></i>

</div>

</td>

<td id="td">

<div id="dzone">

<i class="b"></i>

</div>

</td>

</tr>

</tbody>

</table>

</div>

</body>

CSS

body, html {

margin: 0;

padding: 0;

}

#table {

background: green;

table-layout: fixed;

width: 100%;

height: 100%;

overflow: auto;

border-collapse: collapse;

box-sizing: border-box;

}

#row {

background: red;

}

#td {

vertical-align: top;

background: yellow;

position: relative;

}

#dzone {

background: #85e9f6;

}

#td:nth-child(even) #dzone {

background: #03A9F4;

}

.b {

display: block;

margin-bottom: 10px;

width: 100px;

height: 100px;

background: white;

}

Jackson Cupp

unread,

Jan 14, 2018, 4:23:04 AM1/14/18

to Chromium-discuss, rv.m...@gmail.com

Having the same issue:

OS: Windows 10 Enterprise

Chrome 63.0.3239.132

Stephen Chenney

unread,

Jan 16, 2018, 9:13:47 AM1/16/18

to say...@gmail.com, Chromium-discuss, rv.m...@gmail.com

https://bugs.chromium.org/p/chromium/issues/detail?id=798478

This is apparently our attempt to match the spec. Please direct all discussion to the bug report after reading the bug report to the end.

Stephen.

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

Reply all

Reply to author

Forward