円グラフの計算幅が正しくないため、円形ではありません

Question

円のdivがあり（大きなボーダー半径を使用しています）、メディアクエリを使用してさまざまな画面サイズでサイズが異なります。しかし、一部のメディアクエリサイズでは、この幅は正しく反映されません。例えば、ここでのスクリーンショットは、余分な小さなデバイスである：

画像は幅と高さは、CSSで80pxに設定されていることを示しているが、計算幅が63pxです。

私は画面を広くドラッグすると、サークルが徐々に幅が広くなり、円になるまで広がっていくのを見ています。特定の幅のブレークポイントでのみサイズを変更するdivではなく、レスポンシブなdivのようです。ここで

はjsfiddleです：

http://jsfiddle.net/52VtD/15513/

は、どのように私はサークルのdivは常に円（高さと同じ幅）であることを得ることができますか？

HTML：

CSS：あなたは、デフォルトではそうフレキシボックス（特にinline-flex）を使用している

#about-page { 
    height: 100%; 
    padding-top: 57px; 
    width: 100%; 
    overflow-y: auto; 
    overflow-x: auto; 
    min-height: 480px; 
    justify-content: center; 
    color: black; 
    background-color: white; 
} 
#content-container { 
    h1, h2, h3, h4, h5, h6 { 
     text-align: center; 
     text-transform: uppercase; 
     font-weight: 200; 
    } 
} 
.circle-container { 
    display: inline-flex; 
    margin-bottom: 40px; 
    width: 100%; 
    justify-content: center; 
} 
.circle { 
    border-radius: 75px; 
    border: 1px solid black; 
    display: inline-flex; 
} 
/* xs */ 

@media only screen and (min-width: 320px) { 
    .circle { 
     height: 80px; 
     width: 80px; 
     margin: 5px; 
    } 
} 
/* s */ 

@media only screen and (min-width: 544px) { 
    .circle { 
     height: 110px; 
     width: 110px; 
     margin: 5px; 
    } 
} 
/* m */ 

@media only screen and (min-width: 768px) { 
    .circle { 
     height: 120px; 
     width: 120px; 
     margin: 8px; 
    } 
} 
/* L */ 

@media(min-width:992px) { 
    .circle { 
     height: 130px; 
     width: 130px; 
     margin: 10px; 
    } 
} 
/* xl */ 

@media only screen and (min-width: 1200px) { 
    .circle { 
     height: 150px; 
     width: 150px; 
     margin: 10px; 
    } 
} 

Answer 1

、円はコンテナ要素に合わせて縮小されます。これを防ぐには、この現象を防ぐためにflex-shrink: 0またはflex: 0 0 auto;と設定してください。彼らはもはやフレックスコンテナの利用可能なスペースに収まらないので、彼らが縮小

.circle { 
    border-radius: 75px; 
    border: 1px solid black; 
    display: inline-flex; 
    flex: 0 0 auto; 
} 

http://jsfiddle.net/52VtD/15520/