children not staying inside parent divs - html

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.
.card {
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
max-width: 800px;
margin: auto;
position: relative;
}
.black_container {
height: inherit;
background: #333;
display: inline-block;
vertical-align: top;
padding: 3%;
font-family: 'Nunito', sans-serif;
}
.content_container {
display: inline-block;
padding: 3%;
/* position: absolute;
top:0;
bottom: 0; */
}
.small_bar {
padding: 3px;
width: 30px;
margin: 0 auto;
background: #e4e4e4;
margin-top: 35px;
}
.name {
color: #fff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
margin: 30px auto 5px auto;
text-align: center;
font-weight: 800;
}
.designation {
font-size: 10px;
margin: 0 auto;
}
.qrcode_container {
float: right;
}
.qr_container {
overflow: auto;
width: 100%;
}
.qr_text {
display: inline-block;
list-style-type: none;
}
.qr_text>li {
font-size: 18px;
font-weight: 600;
letter-spacing: 2.5px;
color: #9a9a9a;
}
.bars {
display: inline-block;
position: relative;
top: 10px;
}
.bars .small_bar {
width: 15px;
background: #777;
}
.bar {
position: absolute;
top: -80px;
}
.qr_code {
display: inline-block;
height: inherit;
border: 1px solid #e4e4e4;
padding: 5px;
}
.button {
width: 150px;
letter-spacing: 1;
text-transform: uppercase;
font-weight: 600;
color: #fff;
text-align: center;
background: #333;
padding: 5px 10px;
}
<div class="card">
<div class="black_container">
<div class="circular">
</div>
<p class="small_bar"></p>
<p class="name">wow</p>
<p class="name designation">Front-End Designer</p>
</div>
<div class="content_container">
<!-- qr code container ends -->
<div class="qr_container">
<div class="qrcode_container">
<ul class="qr_text">
<li>LOREM</li>
<li>IPSUM</li>
<li>DPOLER</li>
</ul>
<div class="bars">
<div class="small_bar bar"></div>
<div class="small_bar"></div>
</div>
<div class="qr_code"></div>
</div>
</div>
<!-- qr code container ends -->
<div class="card_content">
<p>Hello!</p>
<p>My name is lorem</p>
<p>I am a web designer</p>
<p>Im stuck</span>
</p>
<div class="button">button</div>
</div>
<div class="card_footer"></div>
</div>
</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/

Answer 2

If flexbox is an option, this is easy :
Add display: flex to your card
Add flex: 1 to the content-container
See demo below:
.card {
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
max-width: 800px;
margin: auto;
position: relative;
display: flex;
}
.black_container {
height: inherit;
background: #333;
display: inline-block;
vertical-align: top;
padding: 3%;
font-family: 'Nunito', sans-serif;
}
.content_container {
display: inline-block;
padding: 3%;
/* position: absolute;
top:0;
bottom: 0; */
flex: 1;
}
.small_bar {
padding: 3px;
width: 30px;
margin: 0 auto;
background: #e4e4e4;
margin-top: 35px;
}
.name {
color: #fff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
margin: 30px auto 5px auto;
text-align: center;
font-weight: 800;
}
.designation {
font-size: 10px;
margin: 0 auto;
}
.qrcode_container {
float: right;
}
.qr_container {
overflow: auto;
width: 100%;
}
.qr_text {
display: inline-block;
list-style-type: none;
}
.qr_text>li {
font-size: 18px;
font-weight: 600;
letter-spacing: 2.5px;
color: #9a9a9a;
}
.bars {
display: inline-block;
position: relative;
top: 10px;
}
.bars .small_bar {
width: 15px;
background: #777;
}
.bar {
position: absolute;
top: -80px;
}
.qr_code {
display: inline-block;
height: inherit;
border: 1px solid #e4e4e4;
padding: 5px;
}
.button {
width: 150px;
letter-spacing: 1;
text-transform: uppercase;
font-weight: 600;
color: #fff;
text-align: center;
background: #333;
padding: 5px 10px;
}
<div class="card">
<div class="black_container">
<div class="circular">
</div>
<p class="small_bar"></p>
<p class="name">wow</p>
<p class="name designation">Front-End Designer</p>
</div>
<div class="content_container">
<!-- qr code container ends -->
<div class="qr_container">
<div class="qrcode_container">
<ul class="qr_text">
<li>LOREM</li>
<li>IPSUM</li>
<li>DPOLER</li>
</ul>
<div class="bars">
<div class="small_bar bar"></div>
<div class="small_bar"></div>
</div>
<div class="qr_code"></div>
</div>
</div>
<!-- qr code container ends -->
<div class="card_content">
<p>Hello!</p>
<p>My name is lorem</p>
<p>I am a web designer</p>
<p>Im stuck</span>
</p>
<div class="button">button</div>
</div>
<div class="card_footer"></div>
</div>
</div>

Answer 3

Use the class card-body, this will keep the contents inside of the card.
<div class="card border-success">
<div class="card-header border-success">
<h3 class="card-title">Card Title</h3>
</div>
<div class="card-body border-success">
<dl>
<dt>
Stuff
</dt>
<dd>
Stuff Details
</dd>
</dl>
</div>
</div>

Answer 4

replace the .content_container css with:
.content_container {
display: inline-block;
padding: 3%;
vertical-align: top;
}
I think the CSS attribute position: absolute; is causing this issue. In short, absolute position removes the element from the flow of other elements; therefore, its height is simply ignored, and never counted in your .card container.