Абсолютно-расположенный div в div, который занимает все оставшееся пространство

Question

Я пытаюсь сделать макет, который кажется простым. Несмотря на множество примеров, я не могу взломать его.

SideBar| .......MapContainer...... 
SideBar| ..........Map............ 
SideBar| .......MapContainer...... 

Оба SideBar и MapContainer должны быть 100% высоты.

Сложный бит: Карта должна иметь определенную высоту и ширину, потому что библиотека mapbox-gl-js использует свои размеры для ее заполнения. (Вместо добавления контента, который затем его размер).

MapContainer существует, потому что в нем будут другие абсолютно позиционированные элементы перекрытия.

Я пытаюсь избежать кодирования ширины боковой панели в определении MapContainer, чтобы я мог скрывать/показывать боковую панель в JS, и MapContainer автоматически заполняет пробел.

Это становится действительно, очень близко:

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.sidebar, .mapcontainer, .container { 
 
    height: 200px; 
 
} 
 

 
.container { 
 
    width:100%; 
 
    border:1px solid; 
 
    display: flex 
 
} 
 
.sidebar { 
 
    width:200px; 
 
    background:lightblue; 
 
} 
 
.mapcontainer { 
 
    width:auto; 
 
    background:lightgreen; 
 
    position:relative; 
 
    flex-grow: 1; 
 
} 
 

 
.map { 
 
    width: 100%; 
 
    height: 100%; 
 
    position:absolute; 
 
    border: 20px dashed grey; 
 
    
 
}

<div class="container"> 
 
    <div class="sidebar"></div> 
 
    <div class="mapcontainer"> 
 
     <div class="map"> 
 

 
     </div> 
 
    </div> 
 
</div>

Но как только я изменить "высота: 200px" до "высота: 100%", она разрушается ни к чему. Что мне нужно сделать?

Answer 1

Использование видовых экранов единиц vh вместо в .sidebar, .mapcontainer, .container правило

* { 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    margin: 0; 
 
} 
 
.sidebar, .mapcontainer, .container { 
 
    height: 100vh; 
 
} 
 
.container { 
 
    border: 1px solid; 
 
    display: flex 
 
} 
 
.sidebar { 
 
    width: 200px; 
 
    background:lightblue; 
 
} 
 
.mapcontainer { 
 
    background:lightgreen; 
 
    position:relative; 
 
    flex-grow: 1; 
 
} 
 
.map { 
 
    width: 100%; 
 
    height: 100%; 
 
    position:absolute; 
 
    border: 20px dashed grey; 
 
}

<div class="container"> 
 
    <div class="sidebar"></div> 
 
    <div class="mapcontainer"> 
 
     <div class="map"> 
 

 
     </div> 
 
    </div> 
 
</div>

Answer 2

Хорошо, спасибо за резиновую утку. Мне просто нужно добавить height: 100%; к html и body:

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.sidebar, .mapcontainer, .container { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    width:100%; 
 
    border:1px solid; 
 
    display: flex 
 
} 
 
.sidebar { 
 
    width:200px; 
 
    background:lightblue; 
 
} 
 
.mapcontainer { 
 
    width:auto; 
 
    background:lightgreen; 
 
    position:relative; 
 
    flex-grow: 1; 
 
} 
 

 
.map { 
 
    width: 100%; 
 
    height: 100%; 
 
    position:absolute; 
 
    border: 20px dashed grey; 
 
    
 
}

<div class="container"> 
 
    <div class="sidebar"></div> 
 
    <div class="mapcontainer"> 
 
     <div class="map"> 
 

 
     </div> 
 
    </div> 
 
</div>