When I resize the window, it can happen that the <input> elements protrude its parent <div>.
Is there a way how I can assure that:
.split-contentminimum height equals it's content + margin.split-headinghas the same height as.split-content
I have the following markup:
.split { display: flex; align-items: center; justify-content: center; height: 100%;}.split-heading { border-radius: 8px 0 0 8px; min-width: 3em;}.split-content { flex-grow: 1; flex-direction: column; align-items: flex-start; border-radius: 0 8px 8px 0; padding: 0 2rem; background: #ecf0f1;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px"><div style="display:flex; flex-direction:column; height:100%; width:100%"><div style="position:relative; flex:1; width:100%; height:100%;"><div style="position:absolute; top:0; right:0; bottom:0; left:0"><!-- from here onwards i can change stuff the upper part comes from the framework --><div class="split split-container "><div class="split split-heading bg-primary"><h2> 1</h2></div><div class="split split-content"><h3>Heading</h3><input type="text" class="form-control" placeholder="..." readonly="TRUE"></div></div></div></div></div></div>