Why does flex-box work with a div, but not a table?

Question

The following simple snippet results in a single web page that takes up the available screen space with a header at the top, a footer at the bottom, and the main content tak

Answer 1

The html table element retains its display property in a flex container:

display: table

Therefore, it doesn't accept flex properties.

However, simply override that rule with display: block display: flex and the layout should work.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-flow: column;
}
h1,
small {
  flex: 0 1 auto;
}
table {
  display: flex;
  flex: 1 1 auto;
}
tbody {
  display: flex;
  width: 100%;
}
tr {
  display: flex;
  width: 100%;
}
td {
  flex: 1;
  border: 1px solid red;
}

Some Header

  

    
Some Content
    
Some Content
    
Some Content
    
Some Content
    
Some Content
  

Some Footer