Is it expected behaviour for a table cell with "display:flex;" to ignore the "rowspan" attribute?

Question

Consider the following table, representing a graph, with colours to show cell areas:

<style>
   .y-axis {
       background-color: red;
       display:flex;
       flex-flow: column-reverse nowrap;
       justify-content: space-between;
   }

   .graph {
       background-color:purple;
       width:300px;
       height:300px;
       border-left:1px solid black;
       border-bottom:1px solid black;
   }

   .x-axis {
       display:flex;
       flex-flow:row nowrap;
       justify-content: space-around;
       background-color:yellow;
   }
</style>
<table style="border-collapse: collapse;">
    <tbody>
        <tr>
            <td rowspan="3" class="y-axis">
                <span>0</span>
                <span>1</span>
                <span>2</span>
                <span>3</span>
            </td>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td class="graph"></td>
        </tr>
        <tr>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td></td>
            <td class="x-axis">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </td>
        </tr>
    </tbody>
</table>

https://jsfiddle.net/o6x2rehy/

In both Firefox 58 and IE 12 (and presumably all other browsers), the first TD element ignores its rowspan attribute due to the presence of display:flex;.

The table is supposed to look like

<style>
   .y-axis {
       background-color: red;
       display:flex;
       flex-flow: column-reverse nowrap;
       justify-content: space-between;
   }

   .graph {
       background-color:purple;
       width:300px;
       height:300px;
       border-left:1px solid black;
       border-bottom:1px solid black;
   }

   .x-axis {
       display:flex;
       flex-flow:row nowrap;
       justify-content: space-around;
       background-color:yellow;
   }
</style>
<table style="border-collapse: collapse;">
    <tbody>
        <tr>
            <td rowspan="3">
                <div class="y-axis">
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                </div>
            </td>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td class="graph"></td>
        </tr>
        <tr>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td></td>
            <td class="x-axis">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </td>
        </tr>
    </tbody>
</table>

https://jsfiddle.net/bpqnw3sc/1/

but with the first div swelling to consume all vertical space in the first cell.

Is the table cell ignoring its rowspan attribute expected behaviour?

If so, is there a CSS-only way to instruct the div in the latter code to swell to occupy the full vertical space in the cell? (Assume the height of the main graph area (purple), currently fixed at 300px, will be variable and unknown a priori.)

Answer 1

Is it expected behaviour for a table cell with “display:flex;” to ignore the “rowspan” attribute?

Yes.

The reason is that the rowspan attribute affect the table cell <td> element, and that element only, so when one add display: flex to it, it stops being a table cell.

---

Is there a CSS-only way to instruct the div in the latter code to occupy the full vertical space in the cell? (Assume the height of the main graph area (purple), currently fixed at 300px, will be variable and unknown a priori.)

No

(well, maybe, if one of these workarounds is an option: Make a DIV fill an entire table cell)

---

I recommend to not use <table> for layout, and a similar layout using Flexbox, can be achieved, with some notable limitations, described here:

• Layout a flex box similar to a table?

So if the cells can have fixed width's, like a table using table-layout: fixed, you can also span elements cross more than one column, similar to what rowspan does.

---

Here is a start using Flexbox

Fiddle demo

Stack snippet

.container {
  display: inline-block;
}

.flex {
  display: flex;
}

.flex.column {
  flex-direction: column;
}

.flex.column-reverse {
  flex-direction: column-reverse;
}

.bkg-yellow {
  background-color: yellow;
}
.bkg-yellow span {
  flex: 1;
}

.bkg-purple {
  background-color: purple;
  width: 300px;
  height: 300px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.bkg-red {
  background-color: red;
}
.bkg-red span {
  flex: 1;
}

.bkg-blue {
  background-color: blue;
  height: 5px;
}

<div class="container">
  <div class="flex">
    <div class="flex column-reverse bkg-red">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>

    <div class="flex column">
      <div class="bkg-blue"></div>

      <div class="bkg-purple"></div>

      <div class="bkg-blue"></div>

      <div class="flex bkg-yellow">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
      </div>

    </div>
  </div>
</div>