The child appears taller than its content due to the default 'align-items: stretch' style set to flexbox containers. When assigning 'display: flex' to a container it also sets align-items to stretch. Also, since the flex container has a flex-direction of column, the child div stretches out to fill the available height of the parent. This is not a bug and could be changed by simply changing the align-items property on the flex container and by the solutions you've already provided.