css flex layout problem:space allocation not even problem

Question

Here is my code:

.cell {
  border: 1px solid red;
  display: flex;
  flex-grow: 1;
  margin: 0px;
  padding: 3px;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin: 0px;
}

html {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  /*border:1px solid black;*/
  height: calc(100% - 20px);
  margin: 10px;
  padding: 0px;
}

<html>
  <body onload="">
    <div class="container">
      <div class="row">
        <div class="cell">Caller</div>
        <div class="cell">Callee</div>
      </div>
      <div class="row">
        <div class="cell">
          sdsdfddd
        </div>
        <div class="cell">sdfdsf</div>
      </div>
    </div>
  </body>
</html>

The space allocation for the first-row cells is even, why the second-row cells are not even? How can I make the space allocation as the first row?

score 1 · Accepted Answer · answered Jun 18 '23 at 13:33

Add flex-basis: 0; (or use flex:1 shorthand)

.cell {
  border: 1px solid red;
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  margin: 0px;
  padding: 3px;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin: 0px;
}

html {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  /*border:1px solid black;*/
  height: calc(100% - 20px);
  margin: 10px;
  padding: 0px;
}

<html>
  <body onload="">
    <div class="container">
      <div class="row">
        <div class="cell">Caller</div>
        <div class="cell">Callee</div>
      </div>
      <div class="row">
        <div class="cell">
          sdsdfddd
        </div>
        <div class="cell">sdfdsf</div>
      </div>
    </div>
  </body>
</html>

css flex layout problem:space allocation not even problem

1 Answers1