Test page

Posts page with navigation bar in header

Flexibility

Each element directly within a box may be made either flexible and inflexible. Flexible elements may grow when the containing box has extra space available after the size of all of its children have been computed, and shrink if the size would cause the containing box to overflow, yet the preferred width of the flexible element is larger than its minimum width. Inflexible elements do not change in size, even when there is extra space left over in the box.

Sample link

20180914

Display order

Ordinal groups can be used in conjunction with the ‘box-direction’ property to control the order in which the direct children of a box appear. When the computed box-direction is normal, a box will display its elements starting from the lowest numbered ordinal group and ensure that those elements appear to the left (for horizontal boxes) or at the top (for vertical boxes) of the container. Elements with the same ordinal group are flowed in the order they appear in the source document tree. In the reverse direction, the ordinal groups are examined in the same order, except the elements appear reversed.

Sample link

20180914

Unordered list sample

20180909

Link to something

Ordinal groups can be used in conjunction with the ‘box-direction’ property to control the order in which the direct children of a box appear. When the computed box-direction is normal, a box will display its elements starting from the lowest numbered ordinal group and ensure that those elements appear to the left (for horizontal boxes) or at the top (for vertical boxes) of the container. Elements with the same ordinal group are flowed in the order they appear in the source document tree. In the reverse direction, the ordinal groups are examined in the same order, except the elements appear reversed.

20180905

Preformatted text

.modal-body {
    padding: 15px;
    background: #FFF;
    outline: 10px solid #FFF8;
    min-width: 480px;
    border-radius: 10px;
    box-shadow: 0 0 16px #000;
    max-height: 75%;
    overflow-y: auto;
}
20180905

Blockquote test

It's not super easy either. I ran into this also (https://doc.sscaffold-css.com/ysk/tables/) and the root cause is that the <table> element is not considered to be either a block-level or an inline element. It's special, and because it's special, some browsers support setting max-width on it and some don't. So tables need a container element or some other kind of special handling. It's an easy bug to overlook because the cause is so unexpected.

It's a tricky problem. I've been battling with it on MVP.css (https://andybrewer.github.io/mvp/) but I think I found a good solution for responsive tables with some help from the community.

20180904