Разница между max-height:100% и max-height: max-content?

Question

Можете подробно описать разница между max-height: 100% и max-height: max-content. Или можете показать сайт который подробно описал про это.

Спасибо!

Answer 1

Думаю, нет смысла вам рассказывать, что такое max-height, max-content или про единицы измерения - проценты. Наверняка, теорию вы уже знаете. К тому же, вопрос в другом, а именно - в чем разница. Поэтому, чтобы ответить на ваш вопрос:

Разница между max-height:100% и max-height: max-content?

думаю, для этого лучше всего воспроизвести рабочий пример. Он визуально покажет разницу между этими двумя значениями. Для это мы будем использовать свойство overflow: hidden;. Смотрим:

.parent {
  float: left; margin: 10px; width: 200px; height: 200px; border: 2px solid green;
}

.child1 {
  box-sizing: border-box; width: 90%; border: 2px solid red;
  
  overflow: hidden;
  max-height: 100%;
}

.child2 {
  box-sizing: border-box; width: 90%; border: 2px solid red;
  
  overflow: hidden;
  max-height: max-content;
}

<div class="parent">
  <div class="child1">Александр Пушкин родился 26 мая 1799 года в небогатой дворянской семье. Начальное образование, как это было принято у дворян, маленький Пушкин получил дома, его обучением занимались учителя и гувернеры, приглашаемые родителями из разных стран Европы.</div>
</div>
<div class="parent">
  <div class="child2">Александр Пушкин родился 26 мая 1799 года в небогатой дворянской семье. Начальное образование, как это было принято у дворян, маленький Пушкин получил дома, его обучением занимались учителя и гувернеры, приглашаемые родителями из разных стран Европы.</div>
</div>

БЛОГ НА HUSL

Разница между max-height:100% и max-height: max-content?

Ответы (1 шт):