Html 让flex项的大小取决于它的内容，从而尊重它的填充

考虑以下flex box场景：

<div id="container">
   <div id="item1">
       <a href="#">Some Link</a>
   </div>
   <div id="item2">I want about 50% of the window</div>
   <div id="item3">me, too!</div>
</div>

项目1的高度应与其内容所需的高度相同。注意，里面有一个带有填充的链接。Flex项大小只考虑文本的高度，而不考虑填充。

第2项和第3项应共享剩余空间

---

是小提琴。

链接默认为

显示：内联

，不受垂直填充的影响…使链接

内联块

#容器{
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：100%；
位置：绝对位置；
}
#货柜组{
边框：1px纯红；
}
#项目1{
flex:0自动；
}
#项目1 a{
边框：1px纯绿色；
填充：20磅；
显示：内联块；
}
#项目2{
flex:1自动；
}
#项目3{
flex:1自动；
}

我想要窗户的50%左右
我也是！

这就解决了问题。但是，如果第2项或第3项中的文本增长，会发生什么情况。项目将不会保持其50%的大小。我发布了这个问题。

#container {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   position: absolute;
}

#container div {
  border: 1px solid red;
} 

#item1 {
  flex: 0 0 auto;
}

#item1 a {
  border: 1px solid green;
  padding: 20pt;
}

#item2 {
  flex: 1 1 auto;
}

#item3 {
  flex: 1 1 auto;
}