Группа кнопок не оборачивать, когда слишком долго

Question

У меня есть очень длинная кнопка группы: https://jsfiddle.net/cyu4bvak/

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
     <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    </label> 
    <label class="btn btn-primary active"> 
     <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    </label> 
    <label class="btn btn-primary active"> 
     <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ 
    </label> 
    ... 
</div> 

Вне зависимости от размера окна просмотра он всегда принимает одна длинная линия вызывает прокрутку.

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

Если нет какой-либо альтернативы, которую я должен получить, ожидаемое поведение?

Answer 1

Добавить flex-wrap: wrap; в родительский элемент flex (.btn-group), если вы хотите, чтобы гибкие дети обертывались.