divの幅をコンテンツに伸ばす方法

Question

私はそのダイアログに必要なあらゆるタイプのコンテンツに使用できる動的なダイアログコントロールを構築しようとしています。これには、主要コンテナ、ヘッダー（ダイアログタイトル用）、本文コンテンツ、フッター（ボタン用）が含まれます。私は高さが動的にコンテンツの内容とウィンドウの高さを基準に調整するように動作するように管理しましたが、同じように幅を取​​得することはできません。

これまでのところ私はこれを持っています。あなたが見ることができるように、ダイアログの幅は、コンテンツがそれを必要とするときだけそのCSS定義を使用するためにapposedとして定義されているmax-widthを使用するよう強制されています。ここで

.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

あなたはおそらく適切にdiv要素をセンタリングする必要がありますが、コンテンツがうまく適応しなければならないdisplay: flex;またはdisplay:inline-block;

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

を使用して試すことができます。

Answer 2

.dialog-box2 divのmax-widthプロパティを削除します。