Как иметь автоматическую ширину и высоту для фиксированного положения div

Question

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

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

Вот это то, что пробовал:

Code: 

.fade{ 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 100000; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    -ms-touch-action: none; 
    touch-action: none; 
    background-color: rgba(0, 0, 0, .7); 
    -webkit-overflow-scrolling: touch; 
    -webkit-backface-visibility: hidden; 
    text-align: center; 
    -webkit-transition: opacity .3s; 
    transition: opacity .3s; 
} 

.main{ 
    min-width:360px; 
    min-height:326px; 
     margin: 0 auto; 
    opacity: 1; 
    display: inline-block; 
    vertical-align: middle; 
    position: fixed; 
    top: 10%; 
    bottom: 10%; 
    left: 10%; 
    right: 10%; 
    z-index: 100001; 
    /* overflow: auto; */ 
    padding: 1rem; 
    background-color: #fff; 
    text-align: left; 
    font-family: Arial, sans-serif; 
    color: #222; 
    font-size: 100%; 
    line-height: 1.4; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
    -moz-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1); 
} 

.child{ 
    width:100%; 
    height:100%; 
} 

Demo Link

Answer 1

Установка как top и bottom со значением процента вызывает нарушения. Вы должны отбросить настройку bottom, чтобы она имела автоматическую высоту.

Я не уверен, что вы пытаетесь достичь здесь, но если вы хотите, чтобы центрировать положение main элемента с гибкой высоты необходимо установить:

top: 50%; 
    transform: translateY(-50%); 

если вы уже удалили bottom.

Demo

Answer 2

Снимите нижнее свойство из .main класса это ограничивающее DIV от растет.

Предложение

Поскольку вы ДИВ фиксирована, если содержимое превысило ДИВ пользователь не сможет увидеть содержимое, если он выходит за пределы страницы, так что вы можете добавить свиток, если содержание переполнена.