JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<div id="map"></div>

<button id="button">
  Add content to popup
</button>

<button id="button2">
  Reset popup content
</button>

CSS

#map {
    height: 500px;
}

JavaScript

var map = L.map("map").setView([48.86, 2.35], 12);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var initialContent = "test<br />Test<br />Test<br />Test<br />Test<br /><div id='extra'></div>";

var myPopup = L.popup({
	maxHeight: 100,
  closeOnClick: false,
  keepInView: true
}).setLatLng([48.86, 2.35]).setContent(initialContent).addTo(map).openOn(map);

var button = document.getElementById("button");
var extra = document.getElementById("extra");

button.addEventListener("click", function () {
	//myPopup.setContent(myPopup.getContent() + "<br />Test");
  extra.innerHTML += "<br />Test";
  
  // Force Leaflet to check if popup content height is too big.
  myPopup._updateLayout();
});

var button2 = document.getElementById("button2");

button2.addEventListener("click", function () {
	myPopup.setContent(initialContent);
});