Ich war sicher, dass es eine Sache für das war, aber es scheint, als ob ich falsch war (aber wenn Sie es mir bitte gefunden lassen kennt).
Ich habe zwei Klassen .col-sm-fixed hinzugefügt, die die Breite auf die gleiche wie 1 Spaltenbreite setzt, aber gibt es eine max-width und min-width für die Lesbarkeit.
Die andere ist .flex-auto, die nur setzt die Eigenschaften der flex Wert, so dass, egal wie groß, wird dieses Element wachsen, um den Raum für die Zeile zu füllen. Außerdem habe ich einen flex-nowrap (aus Bootstrap) in die Zeile eingefügt, um alle möglichen Shenanigans dort zu halten, wo der Hauptinhalt verschoben werden könnte.
Hoffe das löst Ihr Problem. Ansonsten bitte aktualisieren Sie Ihre Frage und ich werde Ihnen gerne weiterhelfen.
bearbeiten
fand ich die Bootstrap-Äquivalent flex-auto, die col ist.
link here
.col-sm-fixed {
flex: 0 0 8.333%;
max-width: 250px;
min-width: 100px;
}
.flex-auto {
flex: 1 1 50%;
min-width: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col bg-info">
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link active">Hi</a></li>
<li class="nav-item"><a class="nav-link">Howdy</a></li>
</ul>
</div>
<div class="col-11 pl-1 bg-warning">
Main Content Here?
</div>
</div>
</div>
