Ist es möglich, ein div auf die maximale Breite automatisch zu erweitern, wenn es floating Geschwisterstil auf display:none gesetzt ist?Expand div automatisch, wenn floated Geschwister ausgeblendet wird
Bitte nehmen Sie sich einen Blick auf dieses Beispiel: 
Es ist einfach, mit Flexbox - Kinder standardmäßig erweitern:
document.querySelector("button").addEventListener("click", function() {
document.querySelector(".b").classList.toggle("hidden");
});body {
display: flex; /* this is the important bit */
}
div {
border: 0.1em solid black;
margin: 0.5em;
padding: 0.5em;
}
.b {
width: 15%;
flex-shrink: 0;
}
.hidden {
display: none;
}<div class="a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis at metus convallis ornare. Pellentesque in porttitor elit. Sed augue augue, vulputate in laoreet quis, vehicula et arcu. Nullam feugiat elit purus, id euismod ligula sodales nec. Vestibulum mattis molestie lacus. <button>Toggle B</button>
</div>
<div class="b"></div>Browser-Unterstützung für einige Zeit wirklich gut ist jetzt : https://caniuse.com/#feat=flexbox
Andere Option wäre display: table:
document.querySelector("button").addEventListener("click", function() {
document.querySelector(".b").classList.toggle("hidden");
});body {
display: table;
border-spacing: 1em;
border-collapse: separate;
}
.a, .b {
border: 0.1em solid black;
padding: 0.5em;
display: table-cell;
height: 5em;
}
.a {
width: 85%;
}
.b {
width: 15%;
}
.hidden {
display: none;
}<div class="a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis at metus convallis ornare. Pellentesque in porttitor elit. Sed augue augue, vulputate in laoreet quis, vehicula et arcu. Nullam feugiat elit purus, id euismod ligula sodales nec.
Vestibulum mattis molestie lacus. <button>Toggle B</button>
</div>
<div class="b"></div>Aber ... es fühlt sich ein bisschen hacky zu mir. Verwenden Sie einfach flexbox, wenn Sie keine Unterstützung für alte Browser benötigen.
So würde ich es machen. Sehen Sie, ob es für Sie funktioniert.
document.querySelector("button").addEventListener("click", function(){
document.querySelector(".a").classList.toggle("hidden");
});body{
display: block;
}
.container{
width: 96%;
margin-left: 2%;
}
.a, .b {
float: right;
height: 5em;
}
.a {
width: 15%;
background: #00E676;
}
.b {
width: 85%;
background: #1E88E5;
font-family: Calibri;
line-height: 2em;
}
.hidden {
display: none;
}
.hidden ~ .b{
width: 100%;
}
button{
margin: 100px 100px;
}<div class="container">
<div class="a"></div>
<div class="b"></div>
</div>
<button>Toggle</button>
Es gibt mehrere Möglichkeiten, es zu tun. Ich würde flexbox verwenden ('display: flex' auf dem Elternelement dieser beiden), – helb
erwägen,' flex' Elemente zu verwenden - http://jsbin.com/piyidenoje/edit?html,css,js,output –