"Rowspan" Behavior with Flexbox

rowspan or colspan in flexbox?

Maybe a solution is to simply add a negative margin to .div-wrapper1 and you will get the exact layout :

.wrapper {  height: 200px;  width: 200px;  border: 1px solid black;  display: flex;  flex-direction: column;}
.div-wrapper1 {  display: flex;  flex: 1;}
.div-wrapper2 {  display: flex;  flex: 1;  margin-top: -30px;}
.div-wrapper3 {  display: flex;  flex: 1}
.inner-wrapper1 {  display: flex;  flex: 3;  flex-direction: column; }
.div1 {  background-color: red;  display: flex;  flex: 3}
.fake1 {   display: flex;  flex: 1}
.div2 {  background-color: green;  display: flex;  flex: 2}
.div3 {  background-color: blue;  display: flex;  flex: 2}
.inner-wrapper2 {  display: flex;  flex: 3;  flex-direction: column; }
.div4 {  background-color: yellow;  display: flex;  flex: 3}
.fake2 {   display: flex;  flex: 1}
.div-center {  background-color: black;}

<div class="wrapper">  <div class="div-wrapper1">    <div class="inner-wrapper1">      <div class="div1"></div>      <div class="fake1"></div>    </div>    <div class="div2"></div>  </div>    <div class="div-wrapper2">    <div class="div3"></div>    <div class="inner-wrapper2">      <div class="fake2"></div>      <div class="div4"></div>    </div>  </div>  <div class="div-center"></div></div>

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

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>

How do I make flex items fit the height of two rows?

You could do it with grid like this.

body {  background-color: black;}
.grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-gap: 15px;}
.tall {  grid-row: 1 / 3;  grid-column: 3;}
.grid-box {  background-color: #9e9e9e;}

<div class="grid">  <div class="grid-box">    <p>This box has little text.</p>  </div>  <div class="grid-box">    <p>This box is diffrent than small. It has a middleish amout of text.</p>  </div>  <div class="grid-box tall">    <p>This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.</p>  </div>  <div class="grid-box">    <p>This box has little text.</p>  </div>  <div class="grid-box">    <p>This box is diffrent than small. It has a middleish amout of text.</p>  </div></div>

Layout a flex box similar to a table?

If the content you are going to present is of type tabular data, then a table is the proper way.

HTML 5.1 W3C Recommendation, 1 November 2016, 4.9 Tabular data

Given that you can't, or don't want to, alter the markup, this can be done using CSS Table, and with that easily swap between any display type such as flex, block, etc., or even float, using media query etc.

I also removed the <div class="line-break"></div> element, since you don't need, though if it is rendered by a component or similar, leaving it as is won't cause any problem.

Using CSS Table

section {
  display: table;
  width: 100%;
}

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}

<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

How can I use Flexbox to align two boxes in a column, next to a row?

Flexbox is 1D layout. Of course you can add some nesting, some fixed heights, but it's 1D and isn't perfect solution here.

It's much much better to use CSS Grid Layout here, because it's 2D layout.

.grid {  display: grid;}
/* just styles for demo */.grid__item {  font-size: 3em;  padding: 20px;  background-color: orange;  color: white;  margin: 10px;    /* using flexbox for text centering */  display: flex;  align-items: center;  justify-content: center;}
/* medium screen */@media screen and (min-width: 700px) and (max-width: 999px) {  .a {    grid-column: 1 / span 2;  }}
/* wide screen */@media screen and (min-width: 1000px) {  .grid {    grid-template-columns: 1fr 1fr 1fr;  }    .a {    grid-column: 1 / span 2;  }    .d {    grid-row: 3;  }    .e {    grid-column: 2 / span 2;    grid-row: 2 / span 2;  }}

<div class="grid">  <div class="grid__item a">A</div>  <div class="grid__item b">B</div>  <div class="grid__item c">C</div>  <div class="grid__item d">D</div>  <div class="grid__item e">E</div></div>

How can display table-row behave like colspan=3

Using display: table; it cannot be done (cause sadly there's no colspan: 3; or rowspan property in CSS, therefore stylesheet is unable to mimick a real <table> element)

but hey, flex to the rescue!

.row{  display: flex;  flex-flow: wrap;}.cell{  width: 25%;  background:#eee;}.colspan2{  flex: 2;}

<div class="row">  <div class="cell">Cell1</div>  <div class="cell">Cell2</div>  <div class="cell">Cell3</div>  <div class="cell">Cell4</div>  <div class="cell">Cell5</div>  <div class="cell colspan2">Cell6 Colspan2</div>  <div class="cell">Cell7</div></div>

.columns {
  display: grid;
  width: 100%;
  grid-gap: 0;
  grid-template-columns: 2fr 1fr;
}

.column {
  display: block;
}

.box-1 {
  background-color: red;
  height: 200px;
  grid-column: 1;
  grid-row: 1;
}
.box-2 {
  background-color: yellow;
  height: 400px;
  grid-column: 2;
  grid-row: 1 / 3;
}
.box-3 {
  background-color: blue;
  height: 200px;
  grid-column: 1;
  grid-row: 2;
}

*, *::before, *::after {
    box-sizing: inherit;
}

<div class="columns">
  <div class="column is-8 box-1">
      Box 1
  </div>
  <div class="column is-4 box-2">
      Box 2
  </div>
  <div class="column is-8 box-3">
      Box 3
  </div>
</div>
<!-- on desktop: box 1, 2 and 3 -->
<!-- on mobile: box 1, 2 and 3 -->