Как сделать растягивание div с содержимым

Question

Я пытаюсь создать динамический диалог, который можно использовать для любого типа контента, необходимого для этого диалога. Он содержит основной контейнер, заголовок (для заголовка диалога), содержимое тела и нижний колонтитул (для кнопок). Мне удалось заставить его работать, поэтому высота динамически настраивается на основе содержимого и высоты представления окна, но я не могу заставить ширину сделать то же самое.

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

.dialog-box2{ 
 
    position: relative; 
 
    min-width: 400px; 
 
    max-width: calc(90vw - 100px); 
 
    margin: 20px auto; 
 
    margin-bottom: 0; 
 
} 
 

 
.dialog-content{ 
 
    position: relative; 
 
    background-color: #fff; 
 
    background-clip: padding-box; 
 
    border: 1px solid rgba (0,0,0,.2); 
 
    outline: 0; 
 
    box-shadow:0 3px 9px rgba(0,0,0,.2); 
 
    margin-top: 100px; 
 
    min-height: 185px; 
 
} 
 

 
.dialog-header{ 
 
    min-height: 6.43px 
 
    padding: 15px; 
 
    padding-bottom: 0; 
 
    margin-bottom: -1px; 
 
} 
 

 
.dialog-title{ 
 
    padding-bottom: 5px; 
 
    margin:0; 
 
    line-height: 1.43; 
 
    border-bottom: 1px solid #0290d7; 
 
} 
 

 
h3{ 
 
    font-size: 16px; 
 
} 
 

 
.dialog-body{ 
 
    position: relative; 
 
    padding: 15px; 
 
    max-height: calc(85vh - 250px); 
 
    overflow-y: scroll; 
 
    margin-bottom: 30px; 
 
} 
 

 
.dialog-footer{ 
 
    padding: 15px; 
 
    overflow: hidden; 
 
    background-color: #eee; 
 
    border-top: 1px solid #ccc; 
 
} 
 

 
/*---------- for testing only ---------------------*/ 
 
.profile-btn{ 
 
    border: 1px solid #CCCCCC; 
 
    border-bottom: 15px solid #0290D7; 
 
    width: 120px; 
 
    height: 140px; 
 
    margin: 20px 20px 0 0; 
 
    padding-top: 35px; 
 
    color: #0290D7; 
 
    text-align: center; 
 
    float: left; 
 
}

<div class="dialog-box2"> 
 
      <div class="dialog-content"> 
 
      <div class="dialog-header"> 
 
       <h3 class="dialog-title" id="myDialogLabelDefault">Dialog Title</h3> 
 
      </div> 
 
      <div class="dialog-body"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum nisi est sed incidunt magni maxime? Praesentium itaque sed nihil veritatis. Dolorem autem, alias reprehenderit facilis deserunt voluptatum dolore natus. Impedit.</p> 
 
       
 
       <div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div><!-- 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div> 
 
        <div class="profile-btn">Thing</div>--> 
 
       </div> 
 
       
 
      </div> 
 
      <div class="dialog-footer"> 
 
       <div class="prev"> 
 
       <button type="button" class="btn btn-primary-outline">Save as Profile</button> 
 
       </div> 
 
       <div class="sc-next"> 
 
       <button type="button" class="btn-link dialog-cancel" data-close="dialog">Cancel</button> 
 
       <span class="sc-dialog-bullet"></span> 
 
       <button type="button" class="btn btn-primary-outline">Outlined 2nd Btn</button> 
 
       <button type="button" class="btn btn-primary">OK</button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div>

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

Что я делаю неправильно, я чувствую, что я пробовал все, что мог придумать.

Заранее благодарим за вашу помощь!

Answer 1

Вы можете попробовать использовать display: flex; или display:inline-block;

.dialog-box2{ 
display: flex; 
justify-content: center; 
min-width: 400px; 
max-width: 90%; 
margin: 20px auto; 
margin-bottom: 0; 
} 

Вы будете, вероятно, правильно отцентрировать DIV, но содержание должно адаптироваться просто отлично.

Answer 2

Удалить max-width Недвижимость от .dialog-box2 div.