круговые divs вычисленная ширина неправильная, не вызывающая круговой

Question

У меня есть несколько div div (с использованием большого радиуса), и они различаются по разным размерам экрана, используя медиа-запросы. Однако ширина не влияет на некоторые размеры медиа-запросов. Например вот скриншот, расширяющий небольшие устройства:

Изображение показывает, что ширина и высота устанавливаются 80px в CSS, однако вычисленная ширина 63px.

Когда я перетягиваю экран шире, я вижу, что круги постепенно становятся все шире и шире, пока они не станут кругами, вроде как «отзывчивый» div, а не div, который только изменяет размер на определенных точках разрыва.

Вот jsfiddle:

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

Как я могу получить круг дивы, чтобы всегда быть окружностями (такой же ширины, как высота)?

HTML:

CSS:

#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

Вы используете Flexbox (специально inline-flex), так что по умолчанию круги будут сжиматься, чтобы соответствовать элемент контейнера. Чтобы этого не произошло, установите 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/