Почему элементы контейнера вылезают за его пределы, вместо того, что бы его растянуть до необходимой ширины?

Question

[Camaro67]

Вопрос - в заголовке.

Песочница.

Comments

[Johny Smith]

у вас в песочнице нет ни одной строчки CSS кода

Answer 1

[SpideR-KOSS]

Потому что такие вещи нужно делать через списки, ul li.

Пример для размышления:
HTML:

<div class="ui container">
<div class="ui three column grid">
  <div class="column">Логотип</div>
  <div class="column">
    <button class="ui button">Меню</button>
    <div class="ui flowing popup">
      <ul class="ui secondary menu">
        <li><a class="item active" data-tab="1">Категория #1</a></li>
        <li><a class="item" data-tab="2">Категория #2</a></li>
        <li><a class="item" data-tab="3">Категория #3</a></li>
      </ul>
      <div class="ui tab active" data-tab="1">Вкладка категории #1</div>
      <div class="ui tab" data-tab="2">Вкладка категории #2</div>
      <div class="ui tab" data-tab="3">Вкладка категории #3</div>
    </div>
  </div>
  <div class="column">Вход/Регистрация</div>
</div>
</div>

CSS:

li {
list-type: none;
}

Answer 2

[Johny Smith]