Fit exactly bootstrap glyphicon in DIV, keeping responsive qualities

Question

I don't know if it is possible, I've tried everything I could, at no avail. The idea is of having a glyphicon (or a self-made font) to always be the same size of the containing DIV. Bootstrap 3.3.7

Here's the code: CSS

#insidewrap {
background-color: #FFD;
border: 3px dashed green;
z-index: 2;
padding: 0;
height:400px;
}
.big_box {
width: 60vw;
border: 1px solid red;
float: none;
margin: 0 auto;
}
.icon_size {font-size: 60vw;}

HTML

<div class="container col-md-12">
<div id='insidewrap' class="container">
<div class='big_box text-center'>
<i class='glyphicon glyphicon-qrcode icon_size'></i>
</div>
</div>
</div>

If I give the size to the insidewrap DIV, it looks ok when it's full screen, then, going down, the glyphicon loses the contact with the parent div. CSS? Javascript? Tried a little bit of everything. Help.

JSFIDDLE HERE: https://jsfiddle.net/RobDelp/omn9qwz1/

Answer 1

OK, I think i understood what you want by looking at the fiddle. By resizing the screen i see that the glyphicon and the red box go in and out of the boundaries of the green one. So, if you want the height of the greenbox to resize acordingly, setting a min-height on it should do the work:

#insidewrap {
   background-color: #FFD;
   border: 3px dashed green;
   z-index: 2;
   padding: 0;
   /*height:400px;*/
   min-height:1px; /* This is the trick */
}

When you set a min-height, the browser will try to adjust the height of the element to the specified value unless theres an element contained that has a greater height (like the glyphicon in your example), in this case, it will end up wrapping the content, thus getting the height of its content.

See the updated fiddle: https://jsfiddle.net/omn9qwz1/1/

---

UPDATE:

Based on your comment about the icon not following .big_box i think this script might help you:

window.onresize = function(){
    var w = $('.big_box').width() - 4;
    $('.icon_size').css({fontSize: w+'px', marginTop: '4px' }); 
};

window.onresize(); //We force it at the beginning

This will make the icon fill it's parent width when the browser window is resized.

Fiddle: https://jsfiddle.net/15z3ewfk/1/