Chrome / Safari Not Filling 100% Height Of Flex Parent
Answer : Solution Use nested flex containers. Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align . Avoid absolute positioning. Just stick with flexbox all the way through. Apply display: flex to the flex item ( .item ), making it a flex container. This automatically sets align-items: stretch , which tells the child ( .item-inner ) to expand the full height of the parent. Important: Remove specified heights from flex items for this method to work. If a child has a height specified (e.g. height: 100% ), then it will ignore the align-items: stretch coming from the parent. For the stretch default to work, the child's height must compute to auto (full explanation). Try this (no changes to HTML): .container { display: flex; flex-direction: column; height: 20em; border: 5px solid black } .item { display: flex; /* new; nested flex container */ flex: 1; border-bottom: 1px solid white; ...