children not staying inside parent divs

Question

Fiddle: https://jsfiddle.net/uatzust3/

Here is the fiddle for my problem, you'll observe that the children are not staying inside the parent div card and also I want the divs to take full width of parent which they are not taking.

Also, where should I be learning best practices? I am new to the community. Thanks in advance.

The left div(black_container) is short of content but should arrange the height according to the width of the right div(content_container) all the while staying inside the card div.

Answer 1

A parent cannot take the height of a direct child if the child is absolute because the absolute elements are removed from the document flow(like floats), so in this case "card" doesn't even know "content_container" even exists .

https://jsfiddle.net/OmarIsComing/eq4L86g9/1/

update:

solution with flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/2/

solution without flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/3/