Fixed size DIV exceeding-CodePudding

a content inside div exceeding the fixed size which is decided by css.

<style>
  #fixeddiv {
    position: fixed;
    margin: auto;
    max-height: 300px;
    max-width: 700px;
  }
</style>

<div id="fixeddiv">
  
  <div id="M775568ScriptRootC1273665"></div>
<script src="https://jsc.adskeeper.co.uk/c/r/creditkarma.gq.1253664.js" async>
</script>
</div>

The content inside fixeddiv should be fixed between 300px height and 700px width but it exceeding it and position of the content displaying outside of fixed size.

Edited: Child DIV contain responsive native ad and i am trying to fix the position with parent DIV because i do not make modification inside the ad copy due to advertising network policy.

CodePudding user response：

<style>

#fixeddiv { 
    position: fixed;
    margin: auto;
    max-height: 300px;
    max-width: 700px; 
    width:100%;       
    height:100%;
}
  #someotherdiv {
    height:100%;
  }
</style>

<div id="fixeddiv">
<div id="someotherdiv"> contents </div> 
</div>

CodePudding user response：

#fixeddiv > div{
   display: block;
   max-width: 100%;
   height: auto;
   vertical-align: top;
}

It really depends on the content inside the fixed div. You can also add overflow:hidden so the child content wont overflow the fixed div boundaries

CodePudding user response：

Apply width/height values to image not container.

#fixeddiv {
  position: fixed;
  margin: auto;
  border: 20px solid;
}

img {
  max-height: 300px;
  max-width: 500px;
}

<div id="fixeddiv">
  <img src="https://pixy.org/src/20/201310.jpg">
</div>