如何使父元素成为子元素的大小？

Question

I have iframe inside div element:

<div id="toolbarArea" class="toolbarArea"  data-Date="11/2016"> 
            <img id="toolbarTitle" width="15px" height="15px" src="../stdicons/derem/threePoints.png">
            <iframe id="frTools" style="width:94%%;height:90%%;top:0px; position: absolute;" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en" frameBorder="0"></iframe>             
          </div>

.toolbarArea{   
    background-color:#ffffff;
    width:450px; 
    position:relative; 
    z-index:100;
    height:30px;

    border: solid 1px #333;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

I get scroll on the div, how to make parent element to be the size of the child element to prevent the sccroll appereance.

Answer 1

Removing the width and height from the class toolbarArea should do the trick :

.toolbarArea {   
  background-color: #ffffff;
  position: relative; 
  z-index: 100;
  border: solid 1px #333;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

Answer 2

You can prevent the scroll appearance with this:

width: auto;
height: auto;
overflow: hidden;

Answer 3

You need to use one of float: left/right or display: inline/inline-block for parent to be same width as it's content

 #toolbarArea { background-color: #aaa; position: relative; display: inline-block; border: solid 1px #333; -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); } #toolbarTitle { width: 15px; height: 15px; position: absolute; left: 0; top: 0; z-index: 10; } #frTools { width:94%; height:90%; } 

 <div id="toolbarArea" class="toolbarArea" data-Date="11/2016"> <img id="toolbarTitle" src="../stdicons/derem/threePoints.png"> <iframe id="frTools" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en"></iframe> </div> 

---

Please note that your iFrame css is not valid, as 94%% must be 94% and so on.