html - 让 flex 元素的大小取决于它的内容，从而尊重它的填充

Question

考虑以下 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>

一些样式:

#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;
}

元素 1 的高度应与其内容所需的一样高。请注意，里面有一个带有填充的链接。 flex 元素大小只考虑文本的高度，而不考虑填充。

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

here是 fiddle 。

Answer 1

链接默认是 display:inline 并且不受垂直填充的影响...使链接成为 inline-block。

#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;
  display: inline-block;
}
#item2 {
  flex: 1 1 auto;
}
#item3 {
  flex: 1 1 auto;
}

<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>