Как исправить размер div, но держать его отзывчивым

Question

Я пытаюсь создать контейнер (ящик), который содержит информацию, и я хочу исправить размер, но я хочу сделать его отзывчивым. Посмотрите на эту фотографию, чтобы понять немного лучше, что я пытаюсь сделать:

Так что это разрешено: же на данный момент это нормально: НЕПРАВИЛЬНО он должен блокировать размер

И Я попытался следующий код:

.liContainer { 
 
    list-style-type: none; 
 
    border-style: solid; 
 
    margin-bottom: 5px; 
 
}

<li class="liContainer"> 
 
    <div> 
 
    <h3>Container 1</h3> 
 
    </div> 
 
    <div id="id"> 
 
    <span>90b5bb870feb5a1148e4f9042f87c957043b71d60dc91d743bccdc5a10c0f54f </span> 
 
    </div> 
 
    <div> 
 
    State:<span class="state">Running</span> 
 
    </div> 
 
</li>

Answer 1

Добавить word-break:break-all - это позволяет линии разрыв между любыми двумя буквами

Смотрите демо ниже:

.liContainer { 
 
    list-style-type: none; 
 
    border-style: solid; 
 
    margin-bottom: 5px; 
 
    word-break: break-all; 
 
}

<li class="liContainer"> 
 
    <div> 
 
    <h3>Container 1</h3> 
 
    </div> 
 
    <div id="id"> 
 
    <span>90b5bb870feb5a1148e4f9042f87c957043b71d60dc91d743bccdc5a10c0f54f </span> 
 
    </div> 
 
    <div> 
 
    State:<span class="state">Running</span> 
 
    </div> 
 
</li>