Почему progress теряет свои css стили при flex?

Question

[gazes12]

<div class="header-bottom__total">
                        <div class="header-bottom__title">ОБЩИЙ ОНЛАЙН</div>
                        <progress class="header-bottom__progress total-online" max="4000" value="" data-text=''></progress>   
                    </div>

.header-bottom__total {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    border-top: 1px solid #eee;
    margin-top: 15px;
    padding: 10px 0;
}

.header-bottom__title {
}

.header-bottom__progress {
}

С flex:



Без flex:

Comments

[Froggyweb]

все работает https://codepen.io/froggyweb/pen/GRQKwOe

[Ankhena]

Не вполне понятно, что теряется, кроме центрирования. (Зачем для этого флекс тоже мало понятно)
https://codepen.io/AnnaSummer/pen/oNEvQEM

Сделайте наглядную песочницу на codepen.io

Answer 1

[Talim40k]

Попробуйте задать стили так:

.header-bottom__progress {
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	        border-radius: 0;
	background-color: #E0E0E0;
}
.header-bottom__progress::-webkit-progress-bar {
	background-color: #E0E0E0;
}
.header-bottom__progress::-webkit-progress-value {
	background-color: #98E2FF;
}
.header-bottom__progress::-moz-progress-bar {
	background-color: #98E2FF;
}

Comments

[gazes12]

Talim40k, У меня у progress было такое свойство: flex: 0 0 50%; я указал flex: 1 1 auto; и все заработало!