Best practice for splitting viewport with CSS flex

Question

Hoping this is not a nonsense question as it is in a way a tad non-specific.

It's quite simple - I am aiming to produce a design splitting the viewport/screen into rough halves (60/40) vertically, similar to how AirBnB do: -

AirBnB New York

Is this just as simple as using flexbox columns (I am using Bootstrap 4), specifying the column widths and setting the right-hand side column to position: fixed?

Any advice that anyone has would be most welcome as I have never approached this type of design before and I want to make sure I am not overlooking anything.

Answer 1

Here's a flex layout based solution.

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 60vh;
}

.box .row.content {
  flex: 1 1 40vh;
}

<div class="box">
  <div class="row header">
    <p><b>header</b>
      (60%)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (40%)
    </p>
  </div>
</div>