Flexbox? Help!

The first step to becoming a flexbox master is to play Flexbox Froggy, do it! https://flexboxfroggy.com/

Any flex layout will always have a parent container followed by one or more children, that's just how it works.

On your parent you should always set the following three properties: display: flex; flex-direction: [column|row]; overflow: [hidden|auto]; On your children you should always set the following two properties: flex: [grow - 0, 1, 2, 3] [shrink - 0, 1, 2, 3] [basis - auto, 1px, 2px]; overflow: [hidden|auto] If you have a parent without any of these properties, or a child without any of these properties, you're doing it wrong. Yes, not all of these properties are needed all the time it's true, but adding these properties anyways will make sure you are slowing yourself down and won't trip yourself later.

What is Shrink, Grow, and Basis?

The "flex" property is shorthand for three properties: flex-grow, flex-shrink, and flex-basis. Since you played Flexbox Froggy a few minutes ago I don't need to explain grow or shrink. The property people have the hardest time with is basis. Flex-basis is the width or height that the child should aim to be. For example, in a flex-direction-row layout, flex-basis would be the width. In a flex-direction-column layout it would refer to the height. You should be using the shorthand "flex" property for these 3 values because like was mentioned before, you should always be setting them all on every single child! flex: 1 1 100px; Let this child grow and shrink but aim to be 100px when possible. flex: 1 0 100px; Let this child grow but never shrink it past 100px. flex: 1 0 auto; Let this child grow but never shrink it past its contents. For example, if this child contains a 10x10 div as a child, then auto will refer to 10. Very handy! flex: 0 0 auto; Never let this child change. Keep the original size of its contents.

When to use Max-height, min-height

Never.

3 Column Layout

Note that the left and right elements are fixed in width, the center grows and shrinks, and all columns will scroll if they overflow past the bounds of the parent. <div style="display: flex; flex-direction: row; overflow: hidden; width: 1000px; height: 500px; background: red;"> <div style="flex: 0 0 200px; overflow: auto; background: blue;">1</div> <div style="flex: 1; overflow: auto; background: green;">2</div> <div style="flex: 0 0 200px; overflow: auto; background: orange;">3</div> </div>

3 Row Layout

Note that the top and bottom elements are fixed in height, the center grows and shrinks, and all columns will scroll if they overflow past the bounds of the parent. <div style="display: flex; flex-direction: column; overflow: hidden; width: 500px; height: 1000px; background: red;"> <div style="flex: 0 0 200px; overflow: auto; background: blue;">1</div> <div style="flex: 1; overflow: auto; background: green;">2</div> <div style="flex: 0 0 200px; overflow: auto; background: orange;">3</div> </div>