Блог

Главная - Вопросы по программированию - Почему минимальная высота не работает как минимальная ширина, когда окно просмотра уменьшается?

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

#html #css

#HTML #css

Вопрос:

Помимо определения минимальной ширины элемента, min-width также используется для регулирования поведения элемента при уменьшении самой области просмотра.

Например,

 .div1 {
    border: 5px solid;
    padding:25px;
    background-color: orangered;
    min-width:400px;
}  
 <div class="div1">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

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

 .div1 {
    border: 5px solid;
    padding:25px;
    background-color: orangered;  
    min-height:500px;
}  
 <div class="div1">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div><br>

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

Комментарии:

1. поскольку высота div по умолчанию равна его содержимому, а ширина div по умолчанию равна 100% его родительского элемента

2. Я думал, какой смысл иметь минимальную ширину, когда вы можете просто установить ширину, а затем максимальную ширину. Таким образом, ширина всегда фиксирована, но поскольку максимальная ширина переопределяет ширину, содержимое не будет превышать максимальную ширину, но когда я протестировал это, оказалось, что ни максимальная, ни минимальная ширина не переопределяют ширину. Итак, это ошибка со стороны MDN утверждать, что max / min-width переопределяет свойство width ?

3. max / min-width никогда не предназначены для переопределения ширины. Они просто устанавливают минимальное и максимальное значение для ширины, вот и все.

4. Я понимаю. Спасибо.