I'm trying to make a TABLE with table-layout:fixed be as high as the viewport; and have some large div in a cell that is scrollable.
This works ine in chrome; however; I can't seem to get it so work in Firefox.
See also this fiddle: https://jsfiddle.net/kw09ncjx/
HTML (all inline)
<!doctype html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body style="height:100%; padding:0; margin:0">
<table style="table-layout:fixed; width:100%; height:100%; border-collapse:collapse">
<tr style="height:100%">
<td style="width:150px; vertical-align:top">
<div class="content">left too mucht text oh
noooz
</div>
</td>
<td>
<div style="width:100%; height:100%; overflow: auto;">
<div style="height:1600px; white-space:nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla leo et tellus
tempus, vitae gravida elit convallis. Donec porta luctus nulla non iaculis. In felis
ligula, volutpat sed neque sit amet, fermentum porttitor felis. In eget semper dui.
Proin ac mollis massa, eu tincidunt enim. Fusce et urna dapibus, elementum risus eget,
tempor quam. Cras sed enim sit amet lacus feugiat interdum a vel enim. In in leo
ullamcorper, dapibus augue quis, mollis enim. Nulla feugiat tortor eget nisi sodales
tempus eget eu felis. Nam sit amet lacus erat. Ut metus magna, fermentum eu metus vitae,
scelerisque semper turpis. Sed varius gravida nisi eu pellentesque. Etiam convallis
dapibus eleifend. Nam rutrum blandit turpis non ornare. Proin interdum lorem et augue
ultricies venenatis. Morbi dolor dolor, mattis et fermentum eget, varius non ipsum.
<br>
Sed ut dignissim ex. Curabitur convallis est eu dui maximus feugiat. Mauris interdum,
justo ac porta tincidunt, magna metus efficitur orci, eu vestibulum lectus ligula
iaculis nunc. Vestibulum accumsan ullamcorper egestas. Aliquam erat volutpat.
Suspendisse eget ultricies diam, nec luctus libero. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Praesent venenatis nibh non dui ullamcorper, at vestibulum
orci semper. Aenean metus felis, lobortis at nisl nec, iaculis convallis erat. Phasellus
eu ultricies elit. Suspendisse vitae varius enim. Donec eget ante feugiat, egestas eros
at, bibendum ligula. Nullam in rutrum quam. Suspendisse sit amet metus accumsan diam
pellentesque rhoncus. Aenean dignissim, odio tincidunt dictum sollicitudin, nulla nibh
tincidunt eros, vitae cursus erat elit vel tortor.
<br>
Duis vitae faucibus nisi. Nulla facilisi. Phasellus vitae dui lectus. Quisque vehicula
sit amet augue eget posuere. Cras tincidunt fringilla massa vitae tristique. Donec
semper odio ut tempus venenatis. Sed euismod malesuada nunc, pharetra interdum augue
porta aliquet. Phasellus eu ex vel felis bibendum auctor. Donec dapibus, dui vitae
ornare pharetra, lorem felis egestas mi, non convallis quam enim et neque. Curabitur eu
felis eu nisi aliquam varius vitae ut erat. Nulla porta, odio sit amet commodo vehicula,
erat eros tincidunt quam, eget lobortis est diam quis ipsum. Proin rhoncus magna a urna
varius mollis. Nam ultricies sapien condimentum, scelerisque lorem nec, tristique risus.
Duis eleifend nunc vel suscipit laoreet.
<br>
</div>
</div>
</td>
<td style="width:40px; background-color: #ccc">
right
</td>
</tr>
</table>
</body>
</html>
It is just a problem that exists in firefox? Or am I doing something that causes undefined behaviour?
