1

I am using flex for styling and having an issue with the width of children elements. In my JS Fiddle example, if you look at "Flexible Cancellation" pill badge ... there is a lot of empty space on the right side. How can I update the flex styles so that the width of the pill-badge does not have this extra blank space? It seems that the width of this child element is extending to the entire width of its parent...

JS Fiddle: https://jsfiddle.net/a76bdLvp/1/

Code Areas of Focus (from JS Fiddle):

.left-column {
   padding: 12px 12px 12px 16px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   -webkit-box-flex: 1;
   flex: 1 1 0px;
}

.pill-badge {
   margin-bottom: 4px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
}

Current Result

enter image description here

Desired Result

enter image description here

I reviewed this example, which seems very similar ... but applying this solution (or inline-flex to child) did not work. I'd really appreciate your help!

Make flex items take content width, not width of parent container

Kameron
  • 10,240
  • 4
  • 13
  • 26
Michael
  • 403
  • 1
  • 9
  • 28

1 Answers1

4

Add max-width: fit-content; to pill-badge-btn

.main-wrapper {
  width: 375px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgb(192, 202, 213);
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(192, 202, 213);
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 8%) 0px 0px 2px 0px, rgb(0 0 0 / 16%) 0px 1px 4px 0px;
  cursor: pointer;
  margin: 16px 0px;
}

.flex-wrapper {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
}

.left-column {
  padding: 12px 12px 12px 16px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  -webkit-box-flex: 1;
  flex: 1 1 0px;
}

.right-column {
  padding: 8px 8px 8px 12px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: end;
  justify-content: flex-end;
  flex-direction: column;
  -webkit-box-flex: 1.25;
  flex: 1.25 1 0px;
}

.pill-badge {
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.pill-badge-btn {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 4px 8px;
  background-color: rgb(232, 242, 255);
  border-radius: 10px;
  color: rgb(0, 68, 153);
  font-size: 10px;
  text-align: left;
  max-width: fit-content;
}

button {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  border-radius: 2px;
  border-width: 0px;
  border-style: solid;
  font-size: 12px;
  padding: 7px 12px;
  background-color: rgb(0, 170, 0);
  color: rgb(255, 255, 255);
  width: 100%;
  margin-top: 0px;
  position: relative;
}
<div class="main-wrapper">
<div class="flex-container">
<div class="flex-wrapper">
<div class="left-column">
  <div class="pill-badge">
    <div class="pill-badge-btn">
      Text
    </div>
    <div class="pill-badge-btn">
      Flexible Cancellation
    </div>
  </div>
</div>
<div class="right-column">
  <button>
  Choose Me
  </button>
</div>
</div>
</div>
</div>
Kameron
  • 10,240
  • 4
  • 13
  • 26
  • This doesn't seem to work in all cases when copy is dynamic. I've updated JSFiddle with more lengthy text. I want to keep width of left-container and right-container same size ... around 50%? https://jsfiddle.net/a76bdLvp/3/ – Michael Feb 04 '22 at 19:16
  • It appears it is already split 50% between the left and right sides: https://i.stack.imgur.com/KSGjj.png. You can try using `width: max-content;` See here https://jsfiddle.net/kameronmayers/b9sdfhy4/7/ – Kameron Feb 04 '22 at 19:29
  • @Michael then with this, I would just add the line break element `
    ` where ever you want word breaks → https://jsfiddle.net/kameronmayers/b9sdfhy4/8/     – Kameron Feb 04 '22 at 19:45