Another common interface pattern is the N-column layout, in which each a parent is divided up evenly into N columns. You can see this layout at work on Codepen, which provides a sandbox for tinkering with HTML, CSS, and JavaScript. Visit Codepen and you will see three text editors in a 3-column layout.
You can create your own N-column layouts using Flexbox. Consider this attempt to present the main Wikipedia pages in three different languages using three iframe elements:
The name iframe is a contraction of inline frame. The element is used to embed one page inside another. Not every website allows itself to be embedded inside another, but Wikipedia does.
To make the frames appear in columns, you need to a flex parent with horizontal flow:
The body has also been made to fill the page. Try resizing the page. The third column gets cut off, and then the second column. In an N-column layout, each of the columns is always visible.
To make each consume a 1/3 of their parent's space without overflowing, you set flex-grow to 1 on all columns. So that a child's baseline size doesn't break the evenness of the layout, you must also set flex-basis to 0:
The min-width is also set to 0 in case the browser has a default that interferes with the basis.
Fitting three web pages into a small box is probably a bad idea. Here they are in a bigger box:
Before Flexbox, you could have made an 3-column layout by setting the widths of each column to 33%. But you'd have to be careful that no extra whitespace appeared between the columns and made the total width exceed 100%. Switching to a 4-column layout meant changing all the widths to 25%. Flexbox discards the whitespace between columns and automatically does the sizing for you based on the number of children.