JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="master">
<div>
<p>Этот див задает высоту</p>
<p>Этот див задает высоту</p>
<p>Этот див задает высоту</p>
</div>
</div>
<div class="slave">
<div class="slaveHeader">
Slave header
</div>
<div class="slaveList">
<ul>
<li>Высота</li>
<li>этого</li>
<li>дива</li>
<li>должна</li>
<li>соответствовать</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
<li>хозяйскому</li>
</ul>
</div>
</div>
</div>
CSS
.container {
display: flex;
align-items: stretch;
width: 300px;
}
.master, .slave {
flex-grow: 1;
flex-basis: 0;
padding: 10px;
}
.master {
background: #fffafa;
}
.slave {
background: #fafffa;
display: flex;
align-items: stretch;
flex-direction: column;
}
.slaveList {
position: relative;
flex-grow: 1;
overflow: auto;
}
.slaveList > ul {
position: absolute;
top: 0;
bottom: 0;
}