Wie div's Breite Stretch mit Inhalt

Question

Ich versuche, ein dynamisches Dialogfeld Steuerelement, das für jede Art von Inhalten für diesen Dialog erforderlich verwendet werden kann. Es enthält einen primären Container, Header (für den Dialogtitel), Body-Inhalt und Fußzeile (für Buttons). Ich habe es geschafft zu arbeiten, so dass die Höhe sich dynamisch anpasst, basierend auf dem Inhalt und der Ansichtshöhe des Fensters, aber ich kann die Breite nicht erreichen, um das Gleiche zu tun.

Hier ist, was ich bisher habe. Wie Sie sehen können, wird die Breite des Dialogfelds gezwungen, die maximale Breite zu verwenden, die so definiert ist, dass diese CSS-Definition nur dann verwendet wird, wenn der Inhalt dies erfordert.

.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>

Hier ist ein Beispiel dessen, was ich mit dem obigen Code bin immer und wo das Problem liegt, meine Erklärung bei, was ich versuche zu erreichen ist nicht klar.

Was mache ich falsch, ich habe das Gefühl, dass ich alles versucht habe, was mir einfällt.

Vielen Dank im Voraus für Ihre Hilfe!

Answer 1

können Sie versuchen, display: flex; oder display:inline-block; mit

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

Sie werden wahrscheinlich richtig die div Zentrum müssen, aber der Inhalt sollte gut anpassen.

Answer 2

Entfernen Sie die max-width Eigenschaft aus dem .dialog-box2 Div.