Grid-Items(default Buttons) increase the grid-container?

Question

I have a flex-container with 2 flex-items.

<div className="flexContainer">
  <div className="FlexItem1"></div>
  <div className="FlexItem2"></div>
</div>

Both flex items have:

flex-grow: 1;

flex item 2 is:

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);

Now I add grid items into grid container(grid items = default buttons).

Problem: These grid items increasing the width of the grid container.

Questions: Why are the default grid items increasing the width of its container here? What is the best way to ensure the flex items stay 50-50 in width, regardless of what happens inside the flex items?

use the full setup : `flex:1 0 50%;` *(+ box-sizing reset)* or shorthand : `flex:1 ;` flex-grow on its own is not enough, it still can shrink ;) Demo : https://codepen.io/gc-nomade/pen/MWaQKpE — G-Cyrillus, May 06 '20 at 10:31

score 0 · Answer 1 · answered May 06 '20 at 10:40

Use flex-basis for your inner containers and set buttons width/height 50px/50px

.flexContainer {
  display: flex;
}
.FlexItem1,.FlexItem2 {
  flex-basis: 150px;
  border: 2px solid #000;
  box-sizing: border-box;
}
.FlexItem2 {
  border-left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.FlexItem2 button {
  width: 50px;
  height: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="flexContainer">
  <div class="FlexItem1"></div>
  <div class="FlexItem2">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    </div>
</div>
</body>
</html>

Grid-Items(default Buttons) increase the grid-container?

1 Answers1