Форсировать текст для обертывания внутри div без ширины

Question

Возможно ли иметь текстовую оболочку внутри встроенного блока div, который имеет минимальную ширину? (Не ширина, ни максимальная ширина)

Вот что я имею в виду:

<style type="text/css"> 

    .container { 
    width:100%; 
    } 

    .field { 
    display: inline-block; 
    vertical-align: top; 
    min-width:25%; 
    } 

    label, input { 
    display: inline-block; 
    } 

    .alert { 
    display:block; 
    } 

</style> 


<div class="container"> 

    <div class="field"> 
     <label style="width:100px;">My Label</label> 
     <input style="width:200px;" type="text" /> 
     <div class="alert"> 
     This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text! 
     </div> 
    </div> 

    <div class="field">...another field...</div> 
    <div class="field">...another field...</div> 
    <div class="field">...another field...</div> 
    etc... 

</div> 

Примечания:

1. label & input являются inline-block поэтому они остаются на той же линии, но div.alert является block, чтобы он отображался на новой строке под другим содержимым поля.

2. div.field имеет только MIN-Width (ширина, не или максимальную ширину), потому что, когда пользователь изменяет размер окна (и ширину div.container) Следующие должно произойти:

   с. Если содержимое встроенной строки фиксированной ширины (в данном случае LABEL + INPUT = 300px) составляет менее 25% от ширины div.container, то div.field должно быть ровно 25% от ширины контейнера.

   b. Если внутреннее содержимое фиксированной ширины поля составляет более 25% контейнера, то они должны вытолкнуть поле до общей ширины.

Итак, есть ли способ, чтобы получить div.alert завернуть на основе ширины поля в соответствии с вышеприведенными правилами?

Answer 1

Я знаю, что это очень старая нить, но это может помочь кому-либо еще. Там в

.field { 
    width: min-content; 
} 

Который говорит, что ваш контейнер сжимается до минимально возможной. Для его использования вы должны быть уверены, что ярлык и ввод будут достаточно большими при минимальной ширине. Но с их фиксированным размером это сделано. Но в этом случае с несколькими полями, они будут обернуты рядом друг с другом, так что я предлагаю

.container { 
    width: min-content; 
} 

Вот jsfiddle.

Это не полностью кросс-браузер, но almost.

Я нашел его here.

Answer 2

Не без JQuery, что-то вроде:

$('.alert').width($('.alert').parents('.field').width());