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

【问题标题】：Set flex item height to size of content将弹性项目高度设置为内容大小
【发布时间】：2021-01-13 23:38:50
【问题描述】：

我在一列中有三个 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%;
}

【问题讨论】：

是的。但是，如果没有您提供的任何代码，我们将无能为力。请了解如何创建一个最小、具体且可验证的示例。
@Terry 谢谢，我添加了一个例子。
@Terry 有什么想法吗？我想知道这是否甚至可以仅使用 CSS。

标签： html css flexbox

【解决方案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

【讨论】：

我认为这不能回答我的问题。我希望所有部分都具有相同的高度，仅达到内容的高度。请看我添加的示例。
我现在明白了...抱歉，之前没有示例。

【解决方案2】：

使用这个：

height: fit-content;

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

【讨论】：