Bootstrap 4 Flexbox boczny cieńszy w pozycji: fixed - css, twitter-bootstrap, flexbox, css-position

Buduję pasek boczny za pomocą systemu siatki wBootstrap 4 i narzędzie Flexbox. W większości przypadków działam, poza tym, że chciałbym, aby pasek boczny był "statyczny", to znaczy, nie powinien się poruszać, gdy użytkownik przewija stronę obok.

Próbowałem to zrobić, dodając pozycję: fixed to it, ale kiedy to zrobiłem, kolumna, w której znajdował się pasek boczny, została zmniejszona do długości najdłuższego napisu, który tam był.

Jak sprawić, aby pasek boczny był nieruchomy, zachowując jednocześnie szerokość kolumny?

Oto mój kod: (Jest to aplikacja React, więc "klasa" jest zamieniana na "className")

Komponent macierzysty:

{ this.state.isLoggedIn ?
<div className="row h-100">
<div className="col-2 no-padding-right">
<Sidebar />
</div>
<div className="col-10 no-padding-left">
<Main />
</div>
</div> :
<Main />
}

Sam pasek boczny:

<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div className="p-2">
Week 11
</div>
<div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div className="p-2">Current Features</div>
<div className="p-2">Feature Request</div>
<div className="p-2">Settings</div>
<div className="p-2">Billing</div>
<div className="p-2">Log Out</div>
</div>

I odpowiedni fragment CSS:

.sidebar-left {
padding-top: 83px;
position: fixed;
}

Dzięki!

Odpowiedzi:

Aplikować max-width do sidebar-left jest równy jak dużo col mieć.

.sidebar-left {
max-width: 16.666667%;
}

Stosuj urywek

body {
margin: 0;
}

.sidebar-left {
font: 13px Verdana;
padding-top: 83px;
position: fixed;
background: red;
max-width: 16.666667%;
left: 0;
top: 0;
overflow: auto;
}

.p-2 {
word-break: break-word;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
<div class="col-2 no-padding-right">
<div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div class="p-2">
Week 11
</div>
<div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div class="p-2">Current Features</div>
<div class="p-2">Feature Request</div>
<div class="p-2">Settings</div>
<div class="p-2">Billing</div>
<div class="p-2">Log Out</div>
</div>
</div>
<div class="col-10 no-padding-left">
<div class="main"></div>
</div>
</div>