Как исправить некорректную работу flexbox в некоторых мобильных браузерах?

Question

[Sergo467]

У меня следующая проблема. Я написал простенький калькулятор, но столкнулся с тем, что у некоторых моих друзей некорректно отображается вёрстка. Я считаю, что в этом виноват flexbox. Подскажите как возможно это исправить. Вот ссылка на мой калькулятор: https://sergo467.site.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
    margin:0;
    padding:0;
    background-color:#2a2a2a;
    width:100vw;
    height:100vh;
    display: flex;
    justify-content:center;
    align-items:flex-start;
    font-family: 'Roboto', sans-serif;
}

.calc{
    background-color:#1d1d1d;
    height:100%;
    aspect-ratio:6/9;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
	touch-action: manipulation;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.calcTop{
    background-color:#4c4c4c;
	border-top-style: solid;
	border-top-color: #2952e5;
	border-top-width: 5px;
    width:96.5%;
    height:22%;
    display:flex;
    flex-direction: column;
}

#calcTopTop{
    width: 100%-10px;
	height: 60%;
	font-size: 200%;
	color: white;
	text-align: right;
	vertical-align: middle;
	padding-right: 10px;
	padding-top: 10px;
}

#input{
    margin: 0;
    padding: 0;
    border: 0;
    width:100%-10px;
    height:40%;
    background-color: #4c4c4c;
    text-align: right;
    outline:none;
    font-size:250%;
    color: white;
    padding-right: 10px;
	padding-left: 10px;
	font-family: 'Roboto', sans-serif;
}

.calcBottom{
    width:96.5%;
    height:73%;
    display:flex;
    justify-content: space-between;
}

.calcBottomLeft{
    width:74.6666666666%;
    height:100%;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content:space-between;
}

.calcBottomRight{
    width:24%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
}

.button{
    font-size:250%;
    color: white;
    border:0;
	font-family: 'Roboto', sans-serif;
}

.buttonX1V1{
    width:32.1428571414%;
    height:16%;
}

.buttonX1V2{
    width:100%;
    height:16%;
}

.buttonWidthX2{
    width:66.0714285684%;
    height:16%;
}

.buttonHeightX2{
    width:100%;
    height:32.8%;
}

.buttonGroup1{
    background-color: #3f3f3f;
}

.buttonGroup2{
    background-color: #2c2c2c;
}

#button20{
    background-color: #2952e5;
}

@media screen and (max-width: 1080px){
    .calc{
        width:100%;
        height:auto;
		font-size: 300%;
    }
}

Comments

[Muslim Mamaev]

Вроде нормально всё.Или вы исправили?

[Sergo467]

Muslim Mamaev, нет не исправил, проблема не в каждом браузере. Скриншоты выше прислал мой друг. Хотя у меня в хроме всё нормально работает.

[Ankhena]

Заметно удобнее делать это гридами. И лишние обертки типа left и rigth будут не нужны. И по клеточкам все точно ровно будет.

[Sergo467]

Ankhena, да я так наверное и сделаю, если не найду причину. Меня начал смущать aspect-ratio, мне кажется, что браузер моего друга не поддерживает это свойство.

[Ankhena]

Sergo467, у aspect-ratio вообще поддержка невелика.

Answer 1

[Sergo467]

Проблема оказалась в aspect-ratio.

Answer 2

[fff ttt]

а почему через display:grid не сделать?

Comments

[Sergo467]

Я ещё совсем новичок(2 недели), поэтому делал так как мне казалось удобно. А display:grid я услышал только от вас, бегу изучать.