JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<div class="layout">
	<div class="nav">Нав (резина вычисляемая авто)</div>
	<div class="sidebar">Сайдбар (фикс)</div>
	<div class="content">Контент (резина от 50% до границы .content)</div>
</div>

CSS

.layout {
	background-color: lightyellow;
	position: relative;
}
.nav {
	background-color: lightgreen;
	position: absolute;
	left: 0;
	right: 200px;
	margin-right: 50%; /* Чтобы найти правую границу, нам нужно знать координаты (50% + 200px). Но как? 200px мы уже отступили и на помощью приходит margin-right, дополнительниый отступ, он и будет этим отступом 50% от родителя. Плюс еще в том, что блоки не взаимодействуют друг с другом, т.к. абсолютно позиционированы. */
	height: 50px;
}
.sidebar {
	background-color: lightblue;
	position: absolute;
	right: 50%;
	width: 200px;
}
.content {
	background-color: #ccc;
	position: absolute;
	right: 0;
	width: 50%;
}