Question

我在一列中有三个div。每个div都有内容，如果溢出则应该滚动。我希望每个div具有相同的高度，每个div的最大高度为其内容的高度。这可以使用flexbox实现吗？

Jsfiddle：http://jsfiddle.net/x6puccbh/2/

正如你在小提琴中看到的那样，所有三个部分的高度相同，但我希望中间部分的高度与其内容一样高。

<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>

.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

这对你有用吗？

<div class="section">
  <div class="header">HEADER</div>
  <p>content sjkdkjasdn asjn dvas jkdb ajd avsd</p>
</div>

CSS

.section:nth-child(2) {
    height:unset;
}

p {
    padding-bottom: 5em;
}

here's a fork of the fiddle

Answer 2

使用这个：

height: fit-content;

你能使用链接吗： https://caniuse.com/?search=fit-content

将弹性项高度设置为内容大小

2 个答案: