Спасибо, я поставил display : inline flex во всех дивах-контейнерах, но проблема с тем что [при изменении масштаба страницы увеличивается длинна input-а осталась (наиболие заметно при изменении масштаба от 100 до 200), никак не могу понять что идет не так...]
<!DOCTYPE html>
<body>
<div class="sidebar-wrapper">
<div class="sidebar">
<div>Какойто длинный текст</div>
<div class="old">
<input type="range" class="old__range">
</div>
</div>
</div>
</body>
<style>
body {
margin: 0;
font-size: 3vmin;
}
.sidebar-wrapper {
height: 100vh;
width: 40vmin;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sidebar-wrapper .sidebar {
background: green;
//display: inline-flex;
//flex-direction: column;
//не помогает
}
.sidebar-wrapper .sidebar .old {
margin: 2vmin 0;
//display: inline-flex;
//flex-direction: column;
//не помогает
}
.sidebar-wrapper .sidebar .old__range {
appearance: none;
display: inline-flex;
padding: 0;
margin: 0;
border: none;
height: 1vmin;
width: 100%;
background: yellow;
}
.sidebar-wrapper .sidebar .old__range::-webkit-slider-thumb {
appearance: none;
width: 1vmin;
height: 1vmin;
background: red;
}
</style>