Chrome 100% width and 100 vw overflow

Question

Padding off, margins off, I don't see what's causing the space circled below. I'm using normalize, it doesn't matter. I get that the vertical scroll bar changes things, but shouldn't 100% width fix this?

The screenshot is using canvas width, max-width 80% and the right hand is allowed to size by the browser. If I set to 20% it wraps below.

Update: For those too lazy to click the repro link, here's a similar snippet:

.model-div {
  background: black;
  display: inline-block;
  height: 100vh;
  max-width: 80%;
  width: 80%;
}

.ui-console {
  display: inline-block;
  height: 100vh;
  max-width: 20%;
  width: 20%;
}

<body>
  <div class="model-div"></div>
  <div class="ui-console">
    <button class="reset" onclick="model.fReset()">Reset</button>
    <button class="blind-mode" onclick="model.fToggleBlind()">Toggle Blind Mode</button>
    <div class="log-text-div"></div>
  </div>
</body>

It would be helpful if you update your question to include a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve) in the question itself. — Obsidian Age, Dec 12 '17 at 01:37
And we're not lazy, we're just hesitant to follow links blindly. Anyway, if you're complaining about the space following the inline-block, there are many questions here about that one already. — Mr Lister, Dec 12 '17 at 07:37

score 1 · Accepted Answer · answered Dec 12 '17 at 10:07

Browsers detect ANY amount of whitespace as 1 space, therefore it prints a space between the two items, thus causing the second item to fall. (Unless you use a workaround.) Possible solutions:

1.Eliminate your whitespace inside your HTML. The easiest way to do this is to use something to minify your HTML, which honestly is a good practice anyway.

2.Set the font-size of your parent to zero

Parent (body, in your example.)

.parent{
  font-size:0;
}

Children

.parent>*{
  font-size:16px;
}

3.Float the children (Bootstrap does this in v3, before it switched to flexbox.)

.model-div,.ui-console{
  float:left;
}

Chrome 100% width and 100 vw overflow

1 Answers1