Как сделать так, чтоб блок не мог стать меньше указанной ширины (даже без содержимого)?

У меня есть блок с текстом. Я хочу сделать так, чтобы несмотря на содержимое этого блока, он в любом случае не мог стать меньше, чем, например 300рх.

Для этого я задаю блоку min-width: 300px, но! почему, когда у меня совсем нет текста в этом блоке, все вообще пропадает (несмотря на то, что минимальная ширина этого блока - 300рх). Почему так происходит?

div {
  display: inline-block;
  background: yellow;
  font-size: 1.5em;
  min-width: 100px;
}

<div></div>