Flex rows min-width stretch

by brian428

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications -->

<div id="container" class="chart-container">
  <div class="chart-pod">Element 1</div>
  <div class="chart-pod">Element 2</div>
  <div class="chart-pod">Element 3</div>
  <div class="chart-pod">Element 4</div>
  <div class="chart-pod">Element 5</div>
  <div class="chart-pod">Element 6</div>
  <div class="chart-pod">Element 7</div>
</div>

CSS

body { padding: 0px; margin: 0px; }

.chart-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-flow: row wrap;
  border: 1px solid black;
  padding: 0px 0px 10px 10px;
}
.chart-pod {
  flex: 1;
  min-width: 300px;
  min-height: 200px;
  background-color: lightblue;
  color: black;
  text-align: center;
  border: 1px solid black;
  margin: 10px 10px 0px 0px;
}