Posts page with navigation aside
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.
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.
Unordered list sample
- box-align
- box-direction
- box-flex
- box-flex-group
- box-lines
- box-ordinal-group
- box-orient
- box-pack
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.
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;
}
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.