Переполнение скрыто, не работает должным образом на встроенных элементах

Question

Я пытаюсь скрыть элементы, которые шире родительской ширины. Вот URL кодепа: https://codepen.io/anon/pen/zMEbrY. Как видите, дети переходят на новые линии, а я хочу, чтобы они оставались на одной линии.

.a {
  width: 21px;
  overflow: hidden;
}

.b, .c {
  display: inline;
}

.b {

}

.c {

}

Answer 1

Использование white-space:

.a {
  width: 21px;
  overflow: hidden;
  white-space: nowrap;
}

.b, .c {
  display: inline;
}

<div class="a">
  <div class="b">500</div>
  <div class="c">501</div>
</div>

Answer 2

Использование white-space:nowrap это исключит все переполненные элементы из-под его юрисдикции

.a {
  width: 21px;
  overflow: hidden;
  white-space: nowrap;
}

.b, .c {
  display: inline;
}

.b {
  
}

.c {
  
}

<div class="a">
  <div class="b">500</div>
  <div class="c">501</div>
</div>

Answer 3

Вы можете добавить white-space: nowrap; в родительский контейнер

https://codepen.io/anon/pen/rQGRdO