1

I'm trying to make a container element, a flex item, the same width as it's span text child. As you can see by inspecting the result from the snippet, although the container .calc-text-container takes up more space than the child element does, even though the flex-grow-property is set to 0.

Is there a way to achieve the desired result?

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

1
  • I don't see the problem in your demo. Can you provide more details? Or an illustration. Mar 1, 2017 at 14:47

1 Answer 1

0

Just flex: 0 0 0; will do the job.

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

1
  • The problem with this is that it will not allow a sentence that can fit on one line to be on one line - setting the flex basis to 0 will attempt to always wrap the text.
    – Emil
    Mar 1, 2017 at 11:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.