flex-grow not sizing flex items as expected

Question

It seems that the content inside a flex div affects its calculated size concerning the flex-grow property. Am I doing something wrong?

In the fiddle pr

Answer 1

I think everything that Michael_B said is correct. Only the solutions is a bit awkward. I personsally don't like calc. It just doesn't feel right.

The problem you have is a more general one. You put too many responsibilities onto one element. In this case it the .button class. Flex and Margin with flex-grow is too much responsibility. Try to break that apart. It means more DOM elements, but it saves you a lot of pain.

.numbers {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
}

.row > .box {
  display: flex;
  flex-basis: 33.3333%;
  justify-content: center;
  align-items: center;
}

.row > .box.box-2 {
  flex-basis: 66.6667%;
}

.button {
  border-radius: 5px;
  border: 1px solid gray;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  width: auto;
  text-align: center;
  margin: 5px;
  width: 100%;
}

    

      
1
      
2
      
3
    
    

      
4
      
5
      
6
    
    

      
7
      
8
      
9
    
    

      
0
      
: