Question

我使用flexbox布局在列中定位三个div，以便每个div具有相同的高度。如果内容太大，每个div都会显示一个滚动条。我希望每个部分只扩展到其内容的高度，但目前发生的是每个部分总是相同的高度，无论其内容如何。

如果容器为900px，则每个部分应为300px，如果部分的内容超过300px，则应显示滚动条。但是，如果let的内容说中间部分只有100px高，那么该部分应该只有100px，剩下的部分应该填充剩余的空间，所以它们每个都是400px高。

正如您在此示例中所看到的，中间部分与其他部分的高度相同，但我希望它只与其内容一样高。这是否可以使用flex布局？

<div class="container">
    <div class="panel">
        <div class="section">
            <div class="header">HEADER</div>
            <div class="content">content<br>content<br>content<br>content
                <br>content<br>content<br>content<br>content
                <br>content<br>content<br>content<br>content</div>
        </div>
        <div class="section">
            <div class="header">HEADER</div>
            <div class="content">content</div>
        </div>
        <div class="section">
            <div class="header">HEADER</div>
            <div class="content">content<br>content<br>content<br>content
                <br>content<br>content<br>content<br>content
                <br>content<br>content<br>content<br>content
            </div>
        </div>
    </div>
 </div>

.container {
    height: 300px;
}

.panel {
    display:flex;
    flex-direction: column;
    height: 100%;
}

.header {
    height: 15px;
    text-align: center;
    flex-shrink: 0;
}

.section {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    height: 100%;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}

.content {
    overflow-y: auto;
    height: 100%;
}

Answer 1

如果你将自己的高度改为自动，我认为它符合你的要求。示例和当前代码如下。如果那不是你想要的话，请告诉我

http://plnkr.co/edit/MMjXmANacvZvHofXzYoL

    .container {
    height: 300px;
}

.panel {
    max-height: 100%;
    display:flex;
    flex-direction: column;
}

.header {
    height: 15px;
    text-align: center;
    flex-shrink: 0;
}

.section {
    border: 1px solid red;
    display: flex;
    flex-direction: column;
    max-height: 33%;
    flex-grow: 1;
}

.content {
    overflow-y: auto;
}

Answer 2

尝试在容器上设置max-height属性，但不要使用vh而不是％（如75vh而不是75％）。

Flex项目扩展到内容高度

2 个答案: