there is html which I insert into document dynamically, to it there is also css. it is also easy to insert using

var style = document.createElement('style');

The problem is that it can be so that inserted into a certain div html crawls out of the borders where the html is inserted because of the css styles. Is it possible to somehow create an artificial border like this div browser.

Closed due to the fact that the essence of the question is not clear to the participants of 0xdb , entithat , Grundy , Viktor Tomilov , Kosta B. September 25, '18 at 21:28 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Attach screenshots and style codes, and better a link to the sandbox so that we at least somehow understand what the problem is - Misha Saidov
  • @MishaSaidov, screen then what the hell? The example should be readable and editable ... - Air
  • Show the layout .... - Air

1 answer 1

  1. when a child is wider / taller than parent

    it's enough for the parent to set the value of overflow = 'scroll'

    MDN CSS / overflow

  2. when the child has a fixed position

    must use iframes

    javascript.ru iframes

example

  • gray frame - parent
  • blue frame - wider / higher parent
  • red frame - has a fixed position

 let html = (template, ...substitutions) => String.raw(template, ...substitutions); // --> Begin var main; (function (main) { function guidGenerator() { var S4 = function () { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); }; // return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); return 'q' + S4() + S4(); } main.guidGenerator = guidGenerator; })(main || (main = {})); (function (main) { function fixOverflow(el) { el.style.overflow = 'scroll'; } main.fixOverflow = fixOverflow; function allowOverflow(el) { el.style.overflow = ''; } main.allowOverflow = allowOverflow; function addButtons(el) { el.insertAdjacentHTML('beforeend', html ` <input type="button" class="foos" data-id="fix" value="fixOverflow"> <input type="button" class="foos" data-id="allow" value="allowOverflow"> `); let foos = { fix(e) { fixOverflow(el); }, allow(e) { allowOverflow(el); }, }; let arrOfFoos = Array.from(el.getElementsByClassName('foos')); arrOfFoos.forEach((el) => { el.onclick = foos[el.dataset.id]; }); } main.addButtons = addButtons; })(main || (main = {})); // -- (function (main) { function addConteiner(el, name = main.guidGenerator()) { el.insertAdjacentHTML('beforeend', html ` <style> #${name} { padding:0; margin:20px; width:400px; height:152px; border: solid 2px grey; } </style> <div id="${name}">${name}</div> `); return document.getElementById(name); } main.addConteiner = addConteiner; })(main || (main = {})); // -- (function (main) { function addBadElement(el, name = main.guidGenerator()) { el.insertAdjacentHTML('beforeend', html ` <style> .${name} { width: 2845px; height:745px; border: solid 2px blue; } </style> <div class="${name}">${name}</div> `); } main.addBadElement = addBadElement; })(main || (main = {})); // -- (function (main) { function addBad2Element(el, name = main.guidGenerator()) { el.insertAdjacentHTML('beforeend', html ` <style> .${name} { width: 100px; height: 100px; border: solid 2px red; position: fixed; top: 10px; left: 450px; } </style> <div class="${name}">${name}</div> `); } main.addBad2Element = addBad2Element; })(main || (main = {})); // -- (function (main) { // -- window.addEventListener('load', load.bind(main)); // --- function load() { console.log('load'); let conteiner = main.addConteiner(document.body); main.addButtons(conteiner); main.addBadElement(conteiner); main.addBad2Element(conteiner); } })(main || (main = {})); // <-- End