html - 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;
}

这会导致两个元素不会垂直增长(因此 main 不会增长得太高)，但是当内容太短时我无法让侧边栏将其高度限制为文档高度。

Answer 1

如果我理解您的目标，我不相信 flexbox(或任何 CSS)可以解决这个问题——如果不应用绝对尺寸； flexbox 可用于使较小 元素变大，但反之则不行。

flex-gorw 和 flex-shrink 根据主轴调整元素的大小 - for 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>