（Chrome＆gt; 49.0）弯曲容器（在非弯曲元素中）不尊重孩子的最小高度

Question

此代码停止使用最近版本的Chrome（例如52＆amp; 53），但它仍在使用Chrome 49和最新的Firefox版本。

基本上，当垂直空间很小时，textarea的容器缩小到0，因为所有其他非弯曲元素都需要空间，而不是考虑textarea的最小高度。

知道如何克服这个问题吗？

谢谢！

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

html,body {
  margin:0;
}

html, body, app {
  height:100%;
  overflow:hidden;
}

app {
  background-color: cyan;
  padding: 10px;
}

[flexlayout] { 
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[flex] {
  flex: 1;
}

＆＃13;

<app flexlayout>
  <div flex flexlayout>
    <div flex flexlayout style="flex-shrink:0;">
      <!-- NON-FLEXED ELEMENT -->
      <div>pokemon</div>
      <!-- FLEXED ELEMENT -->
      <div flex flexlayout>
        <textarea flex style="min-height:250px;"></textarea>
      </div>
      <!-- NON-FLEXED ELEMENT -->
      <div>
        <p>charmander</p>
        <p>squirtle</p>
        <p>bulbasaur</p>
        <p>pikachu</p>
        <p>growlithe</p>
        <p>slowpoke</p>
        <p>eevee</p>
      </div>
    </div>
  </div>
</app>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当你在textarea包装器上使用这些样式时会发生什么：

flex: 1;
min-height: 0;

此代码执行此操作：

• 设置flex-shrink: 1，它允许灵活项目缩小
• 设置flex-basis: 0，即忽略内容的高度（textarea）
• 当min-height: 0为overflow时，visible会阻止textarea强制执行容器的最小高度。

您可以使用默认的min-height: auto

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
html, body {
  margin:0;
}
html, body, app {
  height:100%;
  overflow:hidden;
}
app {
  background-color: cyan;
  padding: 10px;
}
[flexlayout] { 
  display: flex;
  flex-direction: column;
  min-height: 0;
}
[flex] {
  flex: 1;
}
.textarea-wrapper {
  min-height: auto;
}

＆＃13;

<app flexlayout>
  <div flex flexlayout>
    <div flex flexlayout style="flex-shrink:0;">
      <!-- NON-FLEXED ELEMENT -->
      <div>pokemon</div>
      <!-- FLEXED ELEMENT -->
      <div flex flexlayout class="textarea-wrapper">
        <textarea flex style="min-height:250px;"></textarea>
      </div>
      <!-- NON-FLEXED ELEMENT -->
      <div>
        <p>charmander</p>
        <p>squirtle</p>
        <p>bulbasaur</p>
        <p>pikachu</p>
        <p>growlithe</p>
        <p>slowpoke</p>
        <p>eevee</p>
      </div>
    </div>
  </div>
</app>

＆＃13;

＆＃13;

＆＃13;

或使flex-basis成为内容的高度并防止收缩：

flex-basis: auto;
flex-shrink: 0;

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
html, body {
  margin:0;
}
html, body, app {
  height:100%;
  overflow:hidden;
}
app {
  background-color: cyan;
  padding: 10px;
}
[flexlayout] { 
  display: flex;
  flex-direction: column;
  min-height: 0;
}
[flex] {
  flex: 1;
}
.textarea-wrapper {
  flex-basis: auto;
  flex-shrink: 0;
}

＆＃13;

<app flexlayout>
  <div flex flexlayout>
    <div flex flexlayout style="flex-shrink:0;">
      <!-- NON-FLEXED ELEMENT -->
      <div>pokemon</div>
      <!-- FLEXED ELEMENT -->
      <div flex flexlayout class="textarea-wrapper">
        <textarea flex style="min-height:250px;"></textarea>
      </div>
      <!-- NON-FLEXED ELEMENT -->
      <div>
        <p>charmander</p>
        <p>squirtle</p>
        <p>bulbasaur</p>
        <p>pikachu</p>
        <p>growlithe</p>
        <p>slowpoke</p>
        <p>eevee</p>
      </div>
    </div>
  </div>
</app>

＆＃13;

＆＃13;

＆＃13;