Установите ширину div и измените размер, если он не подходит на экране для абсолютного позиционирования div

Question

Я пытаюсь установить фиксированную ширину на div, например 200px. Я хочу, чтобы div тогда всегда имел 200px, за исключением случаев, когда текущему окну не хватает места для него.

div { 
 
    border: 2px solid; 
 
} 
 
.fixedWidth { 
 
    width: 200px; 
 
    position: absolute; 
 
} 
 
.noWidth { 
 
    position: absolute; 
 
}

<div class="fixedWidth"> 
 
    lalala lala lalala lalala 
 
</div> 
 
<br /> 
 
<br /> 
 
<div class="noWidth"> 
 
    alala lala alal lala 
 
</div>

Тогда следующая проблема может быть видно, когда экран становится меньше:

Первый ДИВ не изменяет размер и текст выходит за пределы экрана.

Я заметил, что поведение, которое я пытаюсь достичь, в основном max-width для нормального div, но это не работает для абсолютных позиционированных div.

Так как для нормальных divs это можно сделать без медиа-запросов, я ищу решение без медиа-запросов, но я не уверен, что это возможно.

Answer 1

Вы должны быть в состоянии сделать следующее:

.fixedWidth { 
    max-width:200px; 
    width: 100%; 
} 

Это будет означать, что это 200 пикселей, пока экран не будет достаточно большим.

Answer 2

, если вы хотите, чтобы получить ширину содержимого, чтобы следовать ширины текущего содержания вы должны сделать стиль класса, которые имеют ширину 100% SRY за плохой английский это оленья кожа имеет значения, какой позиции вы выбираете

Answer 3

.fixedWidth { 
    max-width: 100%; 
    position: absolute; 
    width: 200px; 
} 

просто добавьте max-width:100%

Answer 4

Попробуйте поместить этот класс в элемент фиксированной ширины.

#wrapper { 
    max-width: 200px; 
} 

Answer 5

Вам необходимо добавить еще один div с относительным положением внутри div с абсолютным положением.

div { 
 
    border: 2px solid; 
 
} 
 
.fixedWidth { 
 
    position: absolute; 
 
} 
 
.sizefit{ 
 
    position:relative; 
 
    max-width:200px; 
 
    width:100%; 
 
} 
 
.noWidth { 
 
    position: absolute; 
 
}

<div class="fixedWidth"> 
 
<div class="sizefit"> 
 
lalala lala lalala lalala 
 
</div> 
 
    
 
</div> 
 
<br /> 
 
<br /> 
 
<div class="noWidth"> 
 
    alala lala alal lala 
 
</div>