css - Flex 元素宽度与子项相同

Question

我正在尝试制作一个容器元素，一个 flex 元素，其宽度与其跨度文本子项的宽度相同。通过检查代码片段的结果可以看出，尽管容器 .calc-text-container 占用的空间比子元素多，即使 flex-grow-property 设置为 0 .

有没有办法达到预期的效果？

.calc {
  width: 230px;
  background: green;
  height: 100px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.calc a {
  display: flex;
  justify-content: center;
}
.calc-icon-container {
  margin-right: 1em;
}
.calc-text-container {
  flex: 0 0 0;
  background: rgba(20,200,0,0.8);
}

<div class="calc">
  <a href="#">
    <div class="calc-icon-container"><span class="calc-icon">🔫</span></div>
	<div class="calc-text-container"><span class="calc-text">To do something megagiga</span></div>
  </a>
</div>

Answer 1

只是 flex :0 0 0；将完成这项工作。

.calc {
  width: 230px;
  background: green;
  height: 100px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.calc a {
  display: flex;
  justify-content: center;
}
.calc-icon-container {
  margin-right: 1em;
}
.calc-text-container {
  flex: 0 0 0; // or just flex: 0;
  background: rgba(20,200,0,0.8);
}

<div class="calc">
  <a href="#">
    <div class="calc-icon-container"><span class="calc-icon">🔫</span></div>
	<div class="calc-text-container"><span class="calc-text">Reallylongword Short shortandlong</span></div>
  </a>
</div>