Why is overflow: hidden not working on my div?

Question

If you try to give margin-left to C1 div, it moves and overflow is hidden. But if you try to give margin-left to C2 div, it moves towards right, but overflow is not hidden, rather it moves in next line (behavior of inline-block).

So why is it not working on C2 div? Is there any way to solve this problem?

(Basically I want C1 and C2 div to be placed together and overflow should be hidden if I increase their widths, or if I give them margins).

Here's what I'm trying:

.c1 {
  width: 220px;
  height: 200px;
  background-color: #666666;
  display: inline-block;
}
.c2 {
  width: 200px;
  height: 220px;
  background-color: #CCCCCC;
  display: inline-block;
}
.c3 {
  width: 180px;
  height: 210px;
  background-color: #333333;
  display: block;
}
.wrapper {
  background-color: red;
  width: 500px;
  height: 500px;
  display: inline-block;
  overflow: hidden;
}

<div class="wrapper">
  <div class="c1">C1</div>
  <div class="c2">C2</div>
  <div class="c3">C3</div>
</div>

Answer 1

Add white-space: nowrap to the container (.wrapper).

white-space

The white-space property is used to describe how whitespace inside the element is handled.

nowrap

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

_{source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space}

To understand why, with white-space: normal, C2 wraps but C1 does not, see these posts:

• Understanding the wrapping behavior of inline-block elements with overflow:hidden
• Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?

Here's an excerpt from an answer by @BoltClock:

• The value of overflow on a container doesn't influence whether or when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.

• So you have to force the inline-blocks to actually overflow the container.

• Since an inline-block has the same rigid physical structure as a block container box, it's impossible for an inline-block to "break apart" or wrap when it's the only inline-level box on a given line box.