Set padding-left and padding-right to 10% of element width

Question

Is there a way to set padding-left and padding-right to 10% of element width in Flexbox. I tried with padding: 0 10%;, but its not 10% of element width.

.flex {
  display: flex;
}

.item1 {
  padding: 0 3px;
  /*calculated depending on text width*/
}

.item2 {
  padding: 0 16px;
  /*calculated depending on text width*/
}

.item3 {
  padding: 0 34px;
  /*calculated depending on text width*/
}


/*can it be done with one rule for items*/

.item {
  /*padding: 0 (width/10); something like this*/
}

<div class="flex">
  <div class="item1">itm1</div>
  <div class="item2">item2 with greater width</div>
  <div class="item3">item3 with the greatest width ....................................</div>
</div>

EDIT: I solved it with javascript, but can be solved without using js? I just want to set padding to some percentage of text width.

(() => {
  const items = document.getElementsByClassName('item');
  for (let item of items) {
    item.style.padding = `0 ${item.offsetWidth / 10}px`;
  }
})();

.flex {
  display: flex;
}

.item {
  border: 2px solid red;
  white-space: nowrap;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="flex">
        <div class="item">itm1</div>
        <div class="item">item2 with greater width</div>
        <div class="item">item3 with the greatest width ....................................</div>
    </div>
</body>
</html>

*Is there a way to set padding-left and padding-right to 10% of element width* --> if it's 10% of the element width then you fall into a cycle because padding is also included in the element width, how you will define this? — Temani Afif, Nov 29 '19 at 09:50

Temani Afif · Accepted Answer · 2019-11-29T10:53:52.273

1

Here is a hacky idea that works only in Chrome. Since percentage padding will create a cycle, the use of the animation will force the recalculation of the width again:

.item {
  display:table; /* OR inline-table if you want the element to be inline */
  border:1px solid;
}
.item:before,
.item:after{
  content:"";
  display:table-cell;
  padding:0 5%;
  width:0;
  animation:fix 5s linear infinite;
}

@keyframes fix {
  to {
    width:0.1px;
  }
}

<div class="item">itm1</div>
  <div class="item">item2 with greater width</div>
  <div class="item">item3 with the greatest width ....................................</div>

Related questions to understand the issue related to percentage padding:

CSS Grid - unnecessary word break

Why does percentage padding break my flex item?

edited Nov 29 '19 at 10:53

answered Nov 29 '19 at 10:48

Temani Afif

245,468
26
309
415

Hmm, interesting answer :) I don't care for other browsers since I need it in Electron. Can you just explain parts related to animation? – Miki Nov 29 '19 at 11:10
@Miki the animation is a hack to force the redraw of the element, by changing the width slightly I force the browser to recalculate the width of that element again and get the correct padding ... If you remove the animation, the padding will be kept at 0. – Temani Afif Nov 29 '19 at 11:20
@Miki I made it `ìnfinite` so the animation will run forever, you can remove that part if you want the calculation to be done only once on page load. I generally use `infiinite` to make sure it's always fine in case the content may change later based on other things – Temani Afif Nov 29 '19 at 11:30

score 0 · Answer 2 · answered Nov 29 '19 at 09:46

0

Because using % in padding option refers it's parent width , so let say if you set flex box width to 100px , with 30% padding in child div will make 30px padding.

answered Nov 29 '19 at 09:46

aramok

35
1
1
6

score -1 · Answer 3 · edited Nov 29 '19 at 10:02

Here is a simple example of that

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;
  padding: 5px;
  /* this */
}

.upper>div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;
  margin: 10px;
  /* and that, will result in a 10px gap */
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Set padding-left and padding-right to 10% of element width

3 Answers3