CODEWITHSUNDEEP
cssflexbox
flasher1101
flasher1101

Reputation: 83

Flex items dont shrink equally when padding is add to one of them

.flex-container {
  display: flex;
  width: 200px;
  height: 100px;
  padding: 10px;
  background-color: green;
}
.flex-item {
  min-width: 0;
  height: 100%;
  flex: 0 1 50%;
}
.flex-item-1 {
  margin-right: 50px;
  background-color: red;
}
.flex-item-2 {
  padding-left: 50px;
  background-color: rgb(15, 36, 221);
}
  <div class="flex-container">
    <div class="flex-item flex-item-1"></div>
    <div class="flex-item flex-item-2"></div>
  </div>

Flex items dont shrink equally when padding is add to one of them no matter what you do. Is it possible to make items grow equally or shrink equally if one of them have padding?

Upvotes: 1

Views: 868

Answers (2)

flasher1101
flasher1101

Reputation: 83

I found an answer in beatifully written articles on css tricks - https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/

The conclusion is - padding and borders of flex items do not participate in flex-grow or flex-shrink calculations and act as they were taking space outside of those items.

Upvotes: 4

Temani Afif
Temani Afif

Reputation: 273571

Use CSS grid in this case

.flex-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 200px;
  height: 100px;
  padding: 10px;
  gap: 50px;
  background-color: green;
}

.flex-item-1 {
  background-color: red;
}

.flex-item-2 {
  padding-left: 50px;
  background-color: rgb(15, 36, 221);
}
<div class="flex-container">
  <div class="flex-item flex-item-1"></div>
  <div class="flex-item flex-item-2"></div>
</div>

Upvotes: 1

Related Questions