All geek questions in one place

Why does the inner box not expand to the width of the outer box?

This is not an academic question. This happened while working. I just cooked it to a simple question.

I put one div inside another. I expect the inner div to take the width of the outer div. Initially, this is what happens.

Then, if I put a bunch of text in the outer div so that it is wider than the viewport, tell the outer div so that it does not wrap the text and do not scroll the outer div, the situation changes.

The inner div takes the width of the viewport. You can scroll the outer div back and forth and see that the outer div is the width of the text, but the inner div is the width of the viewport.

What's going on here? I would say that the inner div took the width of the outer div, period.

https://plnkr.co/edit/XaysEo?p=preview

  <body>
    <my-app>
    loading...
  </my-app>
  <div>
    This is after the angular part.
  </div>
  <div id="outerDiv" style="background-color:blue;white-space:nowrap;overflow-x:scroll;">
    This is a bunch of text.  It is here to make the outer box wider than the viewport.  Today, Bette and I had lunch at Outback.  Outback steak was good.
    <div id="innerDiv" style="background-color:red;">
      Just some text to make it appear.
    </div>
  </div>
  <div>
    &nbsp;
  </div>
  <div id="outerDivWidth">
    Hello?
  </div>
  <div id="innerDivWidth">
    Hello?
  </div>
  <script>
    let od = document.getElementById('outerDiv');
    console.log(od);
    let ow = od.offsetWidth;
    console.log(ow);
    let odw = document.getElementById('outerDivWidth')
    odw.textContent = ow;

    let id = document.getElementById('innerDiv');
    let iw = id.offsetWidth;
    let idw = document.getElementById('innerDivWidth')
    idw.textContent = iw;
  </script>
  </body>
+4
3

, .

a <div>, , , .

, #innerDiv #outerDiv, #outerDiv <body>. , .

(, #outerDiv) - (#innerDiv), .

#outerDiv, #innerDiv. , . <div>.

white-space:nowrap #outerDiv . , , #outerDiv. overflow-x:scroll .

; " div . div . ? , div div, "

, #innerDiv #outerDiv. #outerDiv , .

, , . - #innerDiv, , #outerDiv.

, #outerDiv. , :

// You'll see .outer and .inner have equal widths
let o = document.querySelector('.outer'),
    i = o.querySelector('.inner');
console.log(o.clientWidth, i.clientWidth);
body {
  /*Only for this test*/
  max-width: 500px;
}

.outer {
  background-color: blue;
  white-space: nowrap;
  overflow-x: scroll;
  background: url(https://www.google.com/logos/doodles/2017/kenya-independence-day-2017-5686012280832000-2x.png) 50% 50%;
}

.inner {
  display: block;
  background-color: red;
}
<div class="outer">
  This is a bunch of text. It is here to make the outer box wider than the viewport. Today, Bette and I had lunch at Outback. Outback steak was good.
  <div class="inner">
    Just some text to make it appear.
  </div>
</div>
Hide result

?

, , . display:grid #outerDiv. CSS, , , #innerDiv #outerDiv. , , , , , .

, .inner , .outer.

// You'll see .inner is wider than .outer
let o = document.querySelector('.outer'),
    i = o.querySelector('.inner');
console.log(o.clientWidth, i.clientWidth);
body {
  /*Only for this test*/
  max-width: 500px;
}

.outer {
  display: grid;
  background-color: blue;
  white-space: nowrap;
  overflow-x: scroll;
}

.inner {
  display: block;
  background-color: red;
}
<div class="outer">
  This is a bunch of text. It is here to make the outer box wider than the viewport. Today, Bette and I had lunch at Outback. Outback steak was good.
  <div class="inner">
    Just some text to make it appear.
  </div>
</div>
Hide result
+2

width div 100%, div. , outerDiv 100% viewport. , overflow, offsetWidth div 100% viewport. , width *.

, - , innerDiv - width outerDiv, width ( , W3C). , ?

* , div. div body.

:

scrollWidth , width). , JavaScript, innerDiv width :

let od = document.getElementById('outerDiv');
let ow = od.scrollWidth;

let id = document.getElementById('innerDiv');
let iw = id.style.width = ow+"px";

.

+1

display: table; #outerDiv. , ( CSS) , . .

.

EDIT: A more detailed explanation as requested by MrLister. I believe that the width for a block element will default to 100% of the parent element, unless explicitly specified. However, since the width is not specified on the parent object, it defaults to 100% of the viewport, as this is the root element. (Try setting the width to 1000px on #outerDiv, it will also stretch to #innerDiv). Use display: tableresets this value since all children of the block are stretched to the width of the table.

0
source

Source: https://habr.com/ru/post/1690553/

More articles:


All Articles