fixed-Popupをchild-inline-block-divの幅と同じにする

Question

popup-container-divの内容の幅をinline-block-divにします。 ポップアップコンテナ自体は、固定、上：50％、左：50％、および変換：平行移動（-50％、-50％）の位置で垂直および水平の中央に配置されます。

スニペットでわかるように、ポップアップはページ幅いっぱいになりません。 代わりに、ページ幅の50％しか使用していないようです。 しかし、popup-divが取ることができる十分なスペースがある場合、次の行にinline-block-divを表示したくありません。

800pxのようにchild-divに高い値の幅を追加すると、ポップアップはそれ自身の幅を子の幅に合わせて調整します。

固定幅の値を設定することなく、ポップアップを中央に配置し、コンテンツの幅をとる可能性はありますか？

.popup 
 
{ 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    padding: 20px; 
 
    background-color: #D5DFE1; 
 
    box-shadow: 5px 5px 10px 0px black; 
 
    transform:translate(-50%,-50%); 
 
} 
 

 
.a 
 
{ 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 30px; 
 
    background-color: #487681; 
 
}

<div class="popup"> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
</div>

事前にありがとうございます。

Answer 1

あなたは

.modal { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.popup { 
 
    padding: 20px; 
 
    background-color: #D5DFE1; 
 
    box-shadow: 5px 5px 10px 0px black; 
 
} 
 
.a { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 30px; 
 
    background-color: #487681; 
 
}

<div class="modal"> 
 
<div class="popup"> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
    <div class="a"></div> 
 
</div> 
 
</div>

下のスニペットを確認し、このため flexboxを使用することができます