フレックスボックスとマージンの自動表示で非表示のオーバーフローが発生しない

Question

フレックスコンテナに個別の子コンテナがあります。これらの子コンテナ内には、単純なコンテンツdivとタイトルdivがあります。私がしようとしているのは、タイトルテキストを縦に並べることですが、ボックスの上部に置いてください。次に、ボックス内のコンテンツdivを水平方向と垂直方向の両方に集中させようとしています。

私はこれを理解しましたが、このコードはドライバの負荷です。しかし、ビューポートのサイズが小さくなると、サイズが小さくなるとコンテンツテキスト（オーバーフロー：隠し）が表示されなくなります。私はこれがマージンが0に設定されていることを理解しましたが、血まみれのコンテンツのdivを中心にするためには0に設定する必要があります！

提供されているすべてのヘルプは非常に高く評価されています。ここでは、問題を視覚化するために作成したjsfiddleへのリンクを示します。ビューポートのサイズを変更すると、問題が表示されます。つまり、「プレーヤー間の合計現金」ボックスに表示されます。

http://jsfiddle.net/mpqbassm/

body { 
 
    background: #000; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.flex-info { 
 
    color: white; 
 
    font-family: 'Arial', sans-serif; 
 
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2); 
 
    padding: 10px; 
 
    border-radius: 2px; 
 
    width: 20%; 
 
    height: 100px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.flex-info.green { 
 
    background: #79B0B4; 
 
} 
 

 
.flex-info.blue { 
 
    background: #7993B4; 
 
} 
 

 
.flex-info.foam { 
 
    background: #79B47D; 
 
} 
 

 
.flex-info.pink { 
 
    background: #9B79B4; 
 
} 
 

 
.flex-info.red { 
 
    background: #B4797F; 
 
} 
 

 
.flex-info .flex-title { 
 
    font-size: 16px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
.flex-info .flex-content { 
 
    font-size: 40px; 
 
    margin: auto; 
 
    overflow: hidden; 
 
}

<div class="flex-container"> 
 
    <div class="flex-info green"> 
 
    <div class="flex-title">Number of characters created</div> 
 
    <div class="flex-content">46,401</div> 
 
    </div> 
 
    <div class="flex-info blue"> 
 
    <div class="flex-title">Number of vehicles purchased</div> 
 
    <div class="flex-content">499,012</div> 
 
    </div> 
 
    <div class="flex-info foam"> 
 
    <div class="flex-title">Total cash amongst players</div> 
 
    <div class="flex-content">$192,012,299</div> 
 
    </div> 
 
    <div class="flex-info red"> 
 
    <div class="flex-title">Total bans issued</div> 
 
    <div class="flex-content">12</div> 
 
    </div>

Answer 1

オーバーフローからのコンテンツを停止するには、overflow: hidden要素の親容器上になければなりません。

この場合、これはクラス.flex-infoのdivになります。

実際には以下をご覧ください。

body { 
 
    background: #000; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.flex-info { 
 
    color: white; 
 
    font-family: 'Arial', sans-serif; 
 
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2); 
 
    padding: 10px; 
 
    border-radius: 2px; 
 
    width: 20%; 
 
    height: 100px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow:hidden; 
 
} 
 

 
.flex-info.green { 
 
    background: #79B0B4; 
 
} 
 

 
.flex-info.blue { 
 
    background: #7993B4; 
 
} 
 

 
.flex-info.foam { 
 
    background: #79B47D; 
 
} 
 

 
.flex-info.pink { 
 
    background: #9B79B4; 
 
} 
 

 
.flex-info.red { 
 
    background: #B4797F; 
 
} 
 

 
.flex-info .flex-title { 
 
    font-size: 16px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
.flex-info .flex-content { 
 
    font-size: 40px; 
 
    margin: auto; 
 
    overflow: hidden; 
 
}

<div class="flex-container"> 
 
    <div class="flex-info green"> 
 
    <div class="flex-title">Number of characters created</div> 
 
    <div class="flex-content">46,401</div> 
 
    </div> 
 
    <div class="flex-info blue"> 
 
    <div class="flex-title">Number of vehicles purchased</div> 
 
    <div class="flex-content">499,012</div> 
 
    </div> 
 
    <div class="flex-info foam"> 
 
    <div class="flex-title">Total cash amongst players</div> 
 
    <div class="flex-content">$192,012,299</div> 
 
    </div> 
 
    <div class="flex-info red"> 
 
    <div class="flex-title">Total bans issued</div> 
 
    <div class="flex-content">12</div> 
 
    </div> 
 
</div>