Question

我有两个容器，一个容器包装两个h2标签，另一个容器包装h2标签和它们上方的标签。但是，由于某些原因，两个容器都小于其中的内容。我希望这些容器的宽度和高度相同。

我尝试将容器的高度和宽度设置为100％。

.label {
  padding: 3px 8px;
  background-color: #fbfb2f;
  display: inline-block;
  position: relative;
  font-size: 10px;
  line-height: 20px; 
}

.label:after {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/Yellow_Tag_Tail.svg");
  position: absolute;
  bottom: 0; 
  left: 37%; 
  margin-bottom: -19px;
}

h2 {
  font-size: 72px;
  line-height: 0.1;
  max-width: 182px;
  margin-top: 42px;
}

.u-padding-left {
  padding-left: 20px;
}

.u-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div class="u-center">
  <div class="text-container">
    <div class="label">Take Your Pick!</div>
    <div class="heading-container">
      <h2>Subscribe,</h2>
      <h2 class="u-padding-left">Simplify</h2>
    </div> 
  </div> 
</div>

我希望文本容器和标题容器的宽度和高度与其孩子相同。

Answer 1

您需要从h2中删除最大宽度属性。然后，容器将与其中包含的内容大小相同。

Answer 2

这是因为h2上的line-height属性。删除line-height属性和max-width，并使width和height为100％。您会看到它的高度和大小会增加，但是如果您的容器包含完整的文本高度，它将看起来如何

.label {
  padding: 3px 8px;
  background-color: #fbfb2f;
  display: inline-block;
  position: relative;
  font-size: 10px;
  line-height: 20px; 
}

.label:after {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/Yellow_Tag_Tail.svg");
  position: absolute;
  bottom: 0; 
  left: 37%; 
  margin-bottom: -19px;
}

h2 {
  font-size: 72px;
  height: 100%;
  width: 100%;
  margin-top: 42px;
}

.u-padding-left {
  padding-left: 20px;
}

.u-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div class="u-center">
  <div class="text-container">
    <div class="label">Take Your Pick!</div>
    <div class="heading-container">
      <h2>Subscribe,</h2>
      <h2 class="u-padding-left">Simplify</h2>
    </div> 
  </div> 
</div>

为什么flex容器小于其内容

2 个答案: