Q:

Tri-Fold using HTML and CSS

How do you format your CSS such that you can print a PDF (from Google Chrome) of a rendered HTML document.
My goal is to have a tri-fold leaflet. Take a standard piece of paper and fold it into thirds and then print on front and back.
Each column needs to stay the same size, even if the content overfills it. (So I don't want the DIV to grow...)
I am using the CSS table like this...
.container
{
    width:11in;
    display: table;
    table-layout:fixed;
    padding:0;
    margin:0;
}
.row
{
    height:8.5in;
    display: table-row;
    padding:0;
    margin:0;
}
.cell
{
    position:relative;
    display: table-cell;
    padding: 20px;
}

Any suggestions? The problem with the above is that if the content goes beyond the DIV, it increases the DIV's size vertically.

A:

Hide the overflow-y and remove the table layout:
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

   .container {
  width: 11in;
  padding: 0;
  margin: 0;
}
.row {
  height: 8.5in;
  display: inline-flex;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  max-height: 8.5in;
  width: 100%;
}
.cell {
  display: inline-block;
  padding: 20px;
  width: 33.33%;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.tall {
  height: 900px;
}
<body>
  <div class="container">
    <div class="row">
      <div class="cell">
        foo
      </div>
      <div class="cell blue">
        foo
        <p class="tall red">bar</p>            
        <br />grill
      </div>
      <div class="cell">
        foo
      </div>
    </div>
    <div class="row">
      <div class="cell">
        foo
      </div>
      <div class="cell red">
        bar
      </div>
      <div class="cell">
        grill
      </div>
    </div>
  </div>
</body>

