Как заставить div уменьшаться и увеличиваться в зависимости от свободного места?

Question

[AliminVerckon]

Есть такая конструкция:

<div class="main-container">
    <div class="sidebar" onclick="openSideBar()">
    .....
    </div>
    <div class="content">
    </div>
</div>

<script>
       const sidebar = document.querySelector(".sidebar")
       let state = true
       function openSideBar(){
       if(state){
         sidebar.classList.add("open")
         state = false
       }
       else{
          sidebar.classList.remove("open")
          state=true
      }
 }
</script>

.sidebar{
    background-color: red;
    min-width: 80px;
    height: 100vh;
    position: relative;
}

.sidebar.open{
    min-width: 190px;
}

сайд бар изменяет свою ширину при нажатии, как заставить content изменить свой размер когда сайд бар открыт и при этом что бы контент не вылазил за main

Answer 1

[Aetae]

.main-container
  display: flex
.content
  flex: auto

Проблема то в чём?

Comments

[Сергей delphinpro]

проблема в отсутствии теоретических знаний. они на уровне около нуля.

Answer 2

[HacerPC]

можно поставить проценты размера:

.sidebar {
    background-color: red;
    width: 10%; 
    height: 100vh;
    position: relative;
    transition: width 0.3s; 
}

.sidebar.open {
    width: 25%;
}

Comments

[HacerPC]

Только ещё ховер положи, и добавь как хочешь размер.