Ich habe das folgende HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Table-cell issue</title>
<style type="text/css">
html, body { height: 100%; }
.table
{
display: table;
height: 100%;
}
.row
{
display: table-row;
}
.aside
{
display: table-cell;
}
.center
{
background-color: red;
display: table-cell;
width: 100%;
}
.wide
{
background-color: green;
width: 16000px;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="aside">
Left column
</div>
<div class="center">
<div class="wide"> </div>
</div>
<div class="aside">
Right column
</div>
</div>
</div>
</body>
</html>Das Problem besteht darin, dass sich das div.center streckt, um sich seinem Inhalt anzupassen, während das div.table den gesamten Viewport einnehmen soll und der restliche Inhalt des div.center unsichtbar sein sollte. Weder overflow:hidden Auch eine explizite Breitenangabe in Pixeln (z. B. 900 Pixel) ist nicht hilfreich.
Ich wäre sehr dankbar für jede Idee, wie man das Problem beheben kann.
