Restricting div height to image height

Question

I have a layout with an image on the left and a tab menu on the right. I would like the image and the text to always occupy each 50% of the width (except if the browser window is too small, in which case the image and tabbed menu stack on top of each other), meaning that both should automatically resize. The image and tab menu are set as two columns:

.col-container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  clear: both;
}

.col {
  flex: 1;
  display: table-cell;
  padding: 10px;
  vertical-align: middle;
}

<div class="col-container">
  <div class="col" style="background:white">
    <img src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="">
  </div>
  <div class="col" style="background:white">
    <h2>Hello World</h2>
    <div class="tab">
      <button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
      <button class="tablinks" onclick="openTab(event, 'About')">About</button>
    </div>
  </div>
</div>

Full running code here: fiddle

Now, my problem is that I would like height of the content of any tab to be limited to that of the image. There should never be text that goes further down than the left image's height. It means that if there is too much text, it should become scrollable. As the viewer windows get rescaled, both the image and the "allowed text height" should adapt. As you can see on the fiddle example, the text in the "About" tab currently runs down way past the image height.

Answer 1

I have rewrote your code a little so it can work as desired. This code is fully responsive (resize the browser to see) and cross browser supported.

I have coloured the background red so you can see what is happening here. I have also reduced @media all and (max-width:700px) to 500 just for this demo so it fits the stackoverflow window.

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

.col-container,
.col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.col-container {
  -ms-flex-flow: wrap;
  flex-flow: wrap;
}

.col {
  background: #b00;
  position: relative;
  -ms-flex: 1 1 0%;
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  overflow: hidden;
}

#menu {
  position: relative;
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  background: #fff;
  z-index: 10;
}
.scroll {
  overflow-y: auto;
  position: absolute;
  top: 0;
  max-height: 100%;
  z-index: 5;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

@media all and (max-width:500px) {
  .col-container {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -ms-flex-align: stretch;
    -webkit-box-align: stretch;
    align-items: stretch;
  }
  .InputItem,
  .col {
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    text-align: center;
  }
  .scroll {
    position: relative;
    padding-top: 0;
  }
}

<div class="col-container">
  <div class="col">
    <img id="menuImg" src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="" width=100%>
  </div>

  <div class="col">
  
    <div id="menu" class="col">
      <h2>Hello World</h2>
      <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
        <button class="tablinks" onclick="openTab(event, 'About')">About</button>
      </div>
    </div>
    
    <div class="content col">

      <div id="Home" class="tabcontent scroll">
        <h3>Home</h3>
        <div>
          Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime
          hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae
          sunt, non sunt tamen ab earum spe causae diligendi profectae. Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem
          ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter
          ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
          nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Accedebant
          enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute
          velut filo pendere statum orbis terrarum fictis vocibus exclamabant. Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt
          et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus. Ut enim benefici
          liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus. Et quia Mesopotamiae
          tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta
          vastarat. erat autem quod cogitabat huius modi. Sed fruatur sane hoc solacio atque hanc insignem ignominiam, quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, cuius exemplo se consolatur, eius exitum expectet, praesertim cum
          in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac tamen hac una plaga conciderit, ignominia senatus. Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus
          parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
          nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Oportunum
          est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides. Quae dum ita struuntur, indicatum
          est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi,
          qui atrocium criminum ponderibus urgebantur. Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas
          Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? At
          nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri, miraberis numquam antea visus summatem virum tenuem te sic enixius observantem,
          ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam. Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros
          excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.
        </div>
      </div>

      <div id="About" class="tabcontent scroll" style="display:none;">
        <h3>About</h3>
        <p>Blah.</p>
      </div>

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

Answer 2

You can use flex and then position properties on the divs to acheive this.

Add this CSS to your fiddle and you are done.

.col-container {
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
 display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
 display: -ms-flexbox;      /* TWEENER - IE 10 */
 display: -webkit-flex;     /* NEW - Chrome */
 display: flex;
}

.col {
 flex: 1;
 border: 1px solid red; /*For demo purpose*/
}
.col:nth-child(2) {
  position: relative;
  overflow: auto;
}

#Home {
 position: absolute;  
}

#About {
 /*This only for the first load. You are anyway changing the display property 
on the tab clicks*/
 display: none;
}

See the fiddle

Answer 3

You should give max-height to tabcontent class.

overflow: auto;
max-height: 386px;

you can get img elemet height than you can et tabcontent height

if you use jquery it s easer than dom js

var imageHeight= document.getElementById("img_element").style.height;
document.getElementsByClassName("tabcontent").style.height=imageHeight;

Answer 4

Just add this and try I hope this will sort out your problem.

.scroll
{
  height:100vh;
  overflow:hidden;
  }

If it does not work just comment :) remember just add this in last of your css. Do not delete anything.