html - 如何使 resize 属性与 flexBox 一起使用？

Question

我想知道如何将 Flexbox 和 resize 属性一起使用(如果可能的话)。考虑以下代码:

 <div style='height:300px; background:black; display:flex;flex-direction:column'>
      <div style='resize:vertical; background:blue; flex-grow:1; height:100px; overflow:hidden'>
      </div>
 </div>

调整大小不起作用 – 我想知道如何让它起作用。

Answer 1

您需要删除 flex-grow 或在每次调整大小时触发增长以再次具有全高元素。使用 height:100% 代替:

<div style='height:300px; background:black; display:flex;flex-direction:column'>
  <div style='resize:vertical; background:blue; ; height:100%; overflow:hidden'>
  </div>
</div>

为了更好地说明问题，请考虑 2 个元素并查看在调整大小时您将如何进行奇怪的跳跃:

.container {
  height: 200px;
  background: black;
  display: flex;
  flex-direction: column
}

.container> :first-child {
  resize: vertical;
  background: blue;
  flex-grow:5;
  height:50px;
  overflow:hidden;
}
.container> :last-child {
  background: red;
  flex-grow:1;
}

<div class="container">
  <div >
  </div>
  <div >
  </div>
</div>