I have an div#in and I want the width of my iFrame to fill the rest of the div#di space if the width of the div#in changes Friends, how can I do this?

#di{
  display: flex;
  border:1px solid red;
}
#in{
  display: block;
  border:1px solid blue;
  height: 56px;
  width: 50px;
  resize: both;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
    <div id="di">
        <div id="in">test by change witdh</div>
        <iframe src="https://www.bing.com"></iframe>
    </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use this CSS:

#myIFrame {
  position: relative;   
  width: 100%;
}

Where #myIFrame is an id that i gave to your frame.