Question

我想要发生什么

我有一个.box，其高度被限制在视口内。在此元素中嵌套了几个级别我有.content-body，其中包含标题和.content项。当.content的高度足够小时，我希望仅.box缩小（显示滚动条）。

发生了什么

在Chrome中，这一切都按预期工作（如上图所示），但在几乎所有其他浏览器中，它都会被截止，因为内容并不想缩小。

守则

我做了一个CodePen来证明这个问题。只需调整浏览器的高度，观察内容元素的响应方式。这里的StackOverflow代码与后代相同。

＆＃13;

/* the most relevant rules to the problem */

.container{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
  display: flex;
  flex-direction: column;
  max-height: calc( 100vh - 50px );
  position: relative;
  overflow: hidden;
}

.box-body { 
  display: flex;
  flex-flow: column;
}

.content-body{
  display: flex;
  flex-direction: column;
}

.content{
  overflow: auto;
}

/* other stuff (appearance mostly) that probably doesn't matter */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box{
    /* appearance */
  width: 600px;
  border-radius: 20px;
  border: 1px solid #bbb;
}
.box-body{
    /* appearance */
  padding: 20px;
  font-family: sans-serif;
  font-size: 18px;
}

.content-header{
  /* appearance */  
  background: #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

.box-label {
  /* appearance */
  padding: 30px 10px;
  background: teal;
  color: white;
  font-family: sans-serif;
  font-size: 20px;
}

.content{
  padding: 10px;
}

p {
  margin: 10px 0px;
}

＆＃13;

<div class="container">

  <div class="box">

    <div class="box-label">
      Header
    </div>

    <div class="box-body">

      <div class="content-body">
        <div class="content-header">
          Content Header
        </div>
        <div class="content">
          <p>Mr do raising article general norland my hastily. Its companions say uncommonly pianoforte favourable.</p>

          <p>On projection apartments unsatiable so if he entreaties appearance. Rose you wife how set lady half wish. Hard sing an in true felt. Welcomed stronger if steepest ecstatic an suitable finished of oh. Entered at excited at forming between so
            produce.</p>

          <p>Answer misery adieus add wooded how nay men before though. Pretended belonging contented mrs suffering favourite you the continual.</p>
        </div>
      </div>

    </div>

    <div class="box-label">
      Footer
    </div>

  </div>

</div>

＆＃13;

Answer 1

弹性项目的初始设置为ThreadPoolExecutor。

这意味着列方向容器（如代码中的容器）中的flex项不能短于其内容。

正如您所观察到的，Chrome中的弹性项目可以随意使用。

Firefox，Edge和其他浏览器可能需要覆盖默认设置。

将此添加到您的代码中：

min-height: auto

revised fiddle

完整说明：Why doesn't flex item shrink past content size?

为什么这个弹性项目不会根据其容器的高度而改变？

1 个答案: