-1

Please have a look at the image below

enter image description here

What I have been intending to do for embarrassingly quite sometime now is to reduce the span of the background color of the last item to make it equal to the other side. After fiddling around, I couldn't do it without messing up the alignment of the column in contrast with the rest of the row. Please do take note that I'm trying to do this without using pixels(px) as a requirement.

Here's my code

HTML

<div class="container">
  <div class="row title">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
  </div>

  <div class="row item-1">
    <div>Sample Title 1</div>
    <div>1</div>
    <div>10</div>
    <div>100</div>
  </div>

  <div class="row item-1">
    <div>Column 2</div>
    <div>2</div>
    <div>20</div>
    <div>200</div>
  </div>

  <div class="row item-1">
    <div>Column 3</div>
    <div>3</div>
    <div>30</div>
    <div>300</div>
  </div>
</div>

CSS

body {
  background-color: purple;
  color: #fff;
}

.container {
  margin-left: 10vw;
  margin-top: 5vw;
}

.row {
  display: flex;
  margin-top: 4vh;
  width: 45vw;
}

.row > div {
  width: 12vw;
}

.row > div:not(:first-child) {
  text-align: center;
}

.container > div:last-child {
  background-color: grey;
  border-radius: 100px;
  padding-left: 2vw;
  margin-left: -2vw;
}

Link to codepen https://codepen.io/anon/pen/KxmJeM

I tried changing the width of the flex items within the last row but I have no dice finding the right combination and fiddling with the padding on the right side but that wouldn't work too.

Thank you for your help

Wax
  • 323
  • 2
  • 19

2 Answers2

1

You can try the following approach. It's a bit of a hack but that's what you need to fix this:

body {
  background-color: purple;
  color: #fff;
}

.container {
  margin-left: 10vw;
  margin-top: 5vw;
}

.row {
  display: flex;
  margin-top: 4vh;
  width: 42vw;
}

.row > div {
  width: 12vw;
}

.row > div:not(:first-child) {
  text-align: center;
}

.container > div:last-child {
  position: relative;
  border-radius: 100px;
  padding-left: 2vw;
  margin-left: -2vw;
}
.container > div:last-child:before {
  content: "";
  display: block;
  position: absolute;
  left: 1vw;
  right: 3vw;
  background: grey;
  height: 100%;
  border-radius: 100px;
  z-index: -1;
}
<div class="container">
  <div class="row title">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
  </div>
  
  <div class="row item-1">
    <div>Sample Title 1</div>
    <div>1</div>
    <div>10</div>
    <div>100</div>
  </div>
  
  <div class="row item-1">
    <div>Column 2</div>
    <div>2</div>
    <div>20</div>
    <div>200</div>
  </div>
  
  <div class="row item-1">
    <div>Column 3</div>
    <div>3</div>
    <div>30</div>
    <div>300</div>
  </div>
</div>
K K
  • 17,794
  • 4
  • 30
  • 39
  • Thank you man! I was so focused on using flex on everything, and did no bother using the traditional hacks. I guess it isn't possible to solve this with just flex atm. – Wax Sep 04 '18 at 11:30
0

Adding This Line in CSS May Work

.container > div >div:last-child {
  width: 100px; 
 }
Pooja Roy
  • 545
  • 5
  • 25
  • I'm sorry, I forgot to mention that I can't use pixels. – Wax Sep 04 '18 at 06:59
  • May be because of vw is the size is relative to viewport https://stackoverflow.com/questions/36876770/css-what-is-best-to-use-for-this-case-px-vw-wh-or-em – Pooja Roy Sep 04 '18 at 07:10