CSS calc() Why is 100% = width of parent element and not the width of the actual element

Question

I'm trying to create a simple text slider using calc() in CSS, but it's not working.

To show how it's supposed to work, I have added the right value additionally

EDIT:
I've edited the Code and it should now contain no further errors but it still doesn't work.
The 100% in calc() seem to refer to the parent element.
Ho do i fix this ?

.box {
  width: 200px;
  height: 30px;
  line-height: 30px;
  font-family: arial;
  font-weight: bold;
  color: #FFF;
  background: #000;
  overflow: hidden;
  cursor: default;
  -moz-user-sselect: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.text {
  white-space: nowrap;
  float: left;
  padding: 0 7px;
  box-sizing: border-box;
  transition: margin 0.5s linear;
  background: #404040;
}

.a:hover {
  transition: margin 2s linear;
  margin: 0 0 0 -90.25px;
}

.b:hover {
  transition: margin 2s linear;
  margin: 0 0 0 calc(200px - 100%);
}

<div class="box">
  <div class="text a">Dieser Text ist zu groß für diese Box</div>
</div>
<br>
<div class="box">
  <div class="text b">Dieser Text ist zu groß für diese Box</div>
</div>

Define "_its not working_" Does it do nothing, have an unexpected result, summon a demon? Please describe the expected result and the actual result — litelite, Oct 02 '17 at 14:58
idk if this is the problem but I think you ment to write this: `margin: 0 0 0 calc(200px-100%)` — Minegolfer, Oct 02 '17 at 15:03
The code is fine 200px - 100% (100% = width = 200px) = 0, so you're setting the margin to 0 — Andrew Bone, Oct 02 '17 at 15:24

score 6 · Answer 1 · answered Oct 02 '17 at 14:59

You missed the space inside the calc

you should have used margin: calc(200px - 100%) instead of margin: calc(200px-100%).

For further reference you better checkout this link

.box {
  width: 200px;
  height: 30px;
  line-height: 30px;
  font-family: arial;
  font-weight: bold;
  color: #FFF;
  background: #000;
  overflow: hidden;
  cursor: default;
  -moz-user-sselect: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.text {
  white-space: nowrap;
  float: left;
  padding: 0 7px;
  box-sizing: border-box;
  transition: margin 0.5s linear;
  background: #404040;
}

.text:hover {
  transition: margin 2s linear;
  margin: 0 0 0 -90.25px; //<-this should be the result of calc.
  margin: calc(200px - 100%); //<-why does this not work?
}

<div class="box">
  <div class="text">Dieser Text ist zu groß für diese Box</div>
</div>

score 4 · Answer 2 · answered Oct 02 '17 at 14:59

4

The expression inside calc will not work if there is no whitespace surrounding the operators. margin: calc(200px - 100%); should work.

answered Oct 02 '17 at 14:59

Axnyff

9,213
4
33
37

CSS calc() Why is 100% = width of parent element and not the width of the actual element

2 Answers2