首页 文章

Flex项目扩展到内容高度

提问于
浏览 次
0

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

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

示例：http://jsfiddle.net/x6puccbh/2/

正如您在此示例中所看到的，中间部分与其他部分的高度相同，但我希望它只与其内容一样高 . 这是否可以使用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%;
}
html css css3 flexbox

2 回答

  • 0

    如果你把你的高度改为自动，我认为它可以满足您的要求 . 示例和当前代码如下 . 如果那不是你想要的，请告诉我

    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;
}
    回复于
  • -1

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

    回复于

相关问题