<div class="parent">
  <div class="child">
    <div class="grandchild">
      My parent has flex-basis: 200px and flex-grow: 1.
    </div>
  </div>
  <div class="child">
    <div class="grandchild">
      My parent has flex-basis: 200px and flex-grow: 1.
    </div>
  </div>
    <div class="child">
    <div class="grandchild">
      My parent has flex-basis: 200px and flex-grow: 1.
    </div>
  </div>
</div>
div {
  box-sizing: border-box;  
}

.parent {
  display: flex;  
  flex-wrap: wrap;
  width: 500px;
  border: thick solid red;
}

.child {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
  height: 100px;
  border: thick solid blue;
}

.grandchild {
  width: 200px;
  border: thick solid green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.