Question

根据CSS技巧的文档，使用justify-content: stretch，flexbox子项应在其容器中拉伸以填充可用空间。我有一个flexbox容器，在其中将主轴设置为列方向，然后在该容器中放置两个div flexbox项。我希望他们平均填充可用的垂直空间（因此我相信flex: 0 1 auto应该这样做）。

这是JS小提琴：

body {
  height: 100%
}

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  border: 1px solid grey;
}

.in {
  height: 25px;
  border: 1px solid black;
  flex: 0 1 auto;
}

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

Answer 1

@Temani Afif指出：

public class CarsController : ApiController
{        
    public SqlConnection Db { get; set; }

    public CarsController()
    {            
        Db = new SqlConnection("XXX");
        Db.Open();
        Request.RegisterForDispose(Db);
    }

    public async Task<IEnumerable<Car>> GetAll()
    {
        //Fetch cars from DB...            
    }
}

body {
  height: 100%
}

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  border: 1px solid grey;
}

.in {
  height: 25px;
  border: 1px solid black;
  flex: 1 1 auto;
}

为什么flexbox子项无法拉伸以填充父容器（包括jsfiddle）？

1 个答案: