Is there a way to use calc() with fit-content or anything similar?-CodePudding

I need to set the height of a div with fit-content minus 15px. Is there a way to do that without JS? I've tried with calc(), but it didn't work.

My goal is to set the height dynamically to an element with several p within it. Each one of these p has a border-bottom, but I don't want the border of the last one to be showed, for peculiar reasons, the framework I'm using doesn't accept last-child or last-of-type, so I'm trying to hide the border shortening the height of the container.

.wrapper {
  width: 100px;
  background: red;
  height: calc(fit-content - 15px)
}

.child {
  height: 100px;
  width: 50px;
  background: blue;
}

<div >
  <div ></div>
</div>

P.S. I'm using sass in this project, but I'm not familiar with it.

CodePudding user response：

Use clip-path to cut 15px from the bottom

.wrapper {
  width: 100px;
  background: red;
  clip-path: inset(0 0 15px 0);
}

.child {
  height: 100px;
  border-bottom: 15px solid green; /* you will not see this */
  width: 50px;
  background: blue;
}

<div >
  <div ></div>
</div>

CodePudding user response：

You can use ::after or ::before

.wrapper{
   position: relative;
   z-index: 2;
}
.wrapper::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
   width: 100%;
   height: calc(100% - 15px);
}

CodePudding user response：

Mask to hide the bottom 15px

.wrapper {
  width: 100px;
  background: red;
  -webkit-mask: linear-gradient(#000 0 0) 0 -15px no-repeat;
}

.child {
  height: 100px;
  width: 50px;
  border-bottom: 15px solid; 
  background: blue;
}

<div >
  <div ></div>
</div>