Tables with caption in a flex container are sized incorrectly #424
Description
This is a followup from #422.
The used main size calculated during flex layout should be applied to a flex item's outer size, so in case of tables, that would be the table wrapper box. However right now, the used main size is applied to the table box. This results in the table wrapper box being oversized by the size of the caption box.
(See https://www.w3.org/TR/CSS2/tables.html#model on table boxes.)
Though I don't think this would be a very common use case...
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex {
display: flex;
flex-direction: column;
height: 250px;
width: 100px;
background-color: blue;
justify-content: space-around;
}
.table {
flex-grow: 0.5;
background-color: red;
height: 10px;
text-align: center;
}
.caption {
height: 50px;
}
</style>
</head>
<body>
<div class="flex">
<table class="table">
<caption class="caption">caption</caption>
<tbody>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Expected:
Actual:
This also affects the test case flex/table-as-item-stretch-cross-size-3.htm.