CODEWITHSUNDEEP
htmlcsswidthcss-calc
ArcaneLight
ArcaneLight

Reputation: 121

CSS calc() working inline but not in class

I have a component that is divided horizontally into thirds. The items on the left and right will each take up a fixed width and the middle element should fill the space in between.

<div>
   <div class="left">Left Element</div>
   <div class="middle">MiddleElement</div>       
   <div class="right">Right Element</div>
</div>

In my css I set the fixed width for the left and right element and then use calc() to tell the middle to take up the rest.

.left, .right {
   width: 8px;
}

.middle {
   width: calc(100% - 16px);
}

The result, though, is that the middle element is a bit too small. When I open up debugging tools I see that the css for it has been changed to:

width: calc(84%);

It is as if the % and the px were ignored, the 16 was subtracted from the 100, and then the % was slapped back on at the end.

If I change the middle element to use the exact same styling, but written inline, it works perfectly.

<div>
   <div class="left">Left Element</div>
   <div style="width: calc(100% - 16px)">MiddleElement</div>       
   <div class="right">Right Element</div>
</div>

I am aware that there are other ways to get the effect that I want, such as setting the parent div's display to flex and leaving the middle element's width at 100%. But more than that I am curious to understand what I am misunderstanding about how to write rules for a a css class vs for an inline style.

Upvotes: 0

Views: 27

Answers (0)

Related Questions