अभिभावक अतिप्रवाह होने पर बाल div को क्लिपिंग से रोकें: ऑटो (इसकी गतिशील सामग्री के कारण) - एचटीएमएल, सीएसएस

#parent{
width:80%;
min-height:50px;
background:red;
}
.child{
width:20%;
height:20px;
margin-left:-5%;
background:blue;
float:left;
}
.child-b{
width:40%;
float:left;
}

<div id="parent">
<div class="child"></div>
<div class="child-b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor sit amet purus nec venenatis. Integer maximus, nisi et pretium convallis, erat metus malesuada lorem, nec porttitor leo felis sollicitudin dolor.
</div>
<div class="child-b">
Lorem ipsum.
</div>
</div>

#parent {
width: 80%;
min-height: 50px;
margin-left: 50px;
background: red;
display: flex;
padding: 10px;
position: relative;
}

.child {
width: 100px;
margin-left: -50px;
margin-right:5px;
background:blue;
}

.child-b {
flex: 50%;
padding:10px;
background:#fff;
}

<div id="parent">
<div class="child"></div>
<div class="child-b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor sit amet purus nec venenatis. Integer maximus, nisi et pretium convallis, erat metus malesuada lorem, nec porttitor leo felis sollicitudin dolor.
</div>
<div class="child-b">
Lorem ipsum.
</div>
</div>