Сжатие боковой панели Flexbox до высоты содержимого

Question

У меня есть макет, где иногда боковая панель может быть значительно выше, чем тело страницы.Когда он превышает высоту экрана, боковая панель продолжает расширяться по вертикали.

Мой код выглядит примерно так:

<div class="fb-col">
    <!-- Headers, etc. -->
    <div class="fb-row">
        <div class="sidebar">
            <!-- Lots of content -->
        </div>
        <div class="main">
            <!-- Less content -->
        </div>
     </div>
     <!-- Footers -->
</div>

со следующим CSS:

.fb-col {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fb-row {
    flex-grow: 1;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.sidebar {
    width: 25%;
    flex-grow: 0;
}
.main {
    flex-grow: 1;
}

Это приводит к тому, что два элемента не растут по вертикали (поэтому основной не увеличивается слишком высоко), но я не могу заставить боковую панель ограничивать ее высоту до высоты документа, когда содержимое слишком короткое.

Answer 1

Если я понимаю вашу цель, я не верю, что flexbox (или любой другой CSS) может решить эту проблему - без применения абсолютных измерений;flexbox может быть использован для увеличения меньшего элемента (ов), но не наоборот.

flex-gorw и flex-shrink размер элементов на основе главной оси - для flex-direction: row, это по горизонтали .

ЕдинственныйРешение, которое я могу придумать, - это использовать JS / jQuery:

$(document).ready(function() {
	$(".sidebar").height($(".main").height());
});

.fb-col {
	display: flex;
	flex-direction: column;
}

.fb-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.sidebar {
	min-width: 25%;
	width: 25%;
	overflow: auto;
}

.main {
}





/* For illustrative purposes */
.fb-row {
	background-color: #FDD;
}

.sidebar {
	background-color: #DFD;
}

.main {
	background-color: #DDF;
}

<div class="fb-col">
	<header><h1>Header</h1></header>
	<div class="fb-row">
		<div class="sidebar">
			<h2>Sidebar</h2>
			<nav>
				<ul>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
        <ul>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
        <ul>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
			</nav>
		</div>
		<div class="main">
			<h2>Content</h2>
			<p>Bacon ipsum dolor amet strip steak pork chop porchetta spare ribs ribeye biltong salami tongue. Sirloin ham ball tip, tongue filet mignon cow kielbasa hamburger doner chicken. Pancetta bresaola chuck corned beef hamburger, tenderloin leberkas swine buffalo beef ribs. Filet mignon ball tip t-bone ground round beef ribs. Biltong burgdoggen venison tail hamburger spare ribs buffalo flank meatball tri-tip leberkas.</p>
			<p>Ribeye porchetta kevin, pork sausage strip steak ham chicken pork chop buffalo ground round t-bone cupim pork belly. Fatback flank prosciutto kevin pork chop, pork loin pig. T-bone landjaeger ball tip fatback, shank ribeye picanha pork ground round filet mignon meatball tri-tip jowl. Shoulder meatloaf pork loin meatball ball tip, hamburger kielbasa. Andouille strip steak alcatra ham hock chuck. Cupim chicken buffalo, picanha biltong landjaeger t-bone. Jowl sirloin meatloaf short ribs tongue ground round bacon chuck fatback meatball hamburger picanha turkey kevin pork.</p>
		</div>
	</div>
	<footer><h2>Footer</h2><small>legal and stuff</small></footer>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Если я понял вашу проблему, вы можете попробовать следующим образом:

.fb-col {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.fb-row {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    min-height: 100%;
}
.sidebar {
    width: 25%;
    flex-grow: 0;
    min-height: 100%;
}
.main {
    flex-grow: 1;
    min-height: 100%;
}

Таким образом .sidebar и .main всегда будут иметь одинаковую высоту с минимальной высотой 100%.

Если это не работает, добавьте следующее правило:

html, body {
  height: 100%;
  margin: 0;
}