CSS flex-wrap：如何让flex-wrap从其父级获取更多空间？

Question

我目前正在使用flex-wrap来包装我的专栏，但是wrap并没有占用更多空间，只是超出了它的父级。应该迫使它的父母扩大。基本上，我需要类wrap-options从其父类overlay-view中获取更多空间。如果需要，我可以提供更多信息。

CSS（Sass）：

.overlay-view
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  padding: 15px
  background-color: #171717
  border: 2px solid grey
  border-radius: 5px
  > .wrap-options
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    flex-wrap: wrap
    max-height: 300px

HTML（JSX）：

<div className="overlay-view">
    <div className="row">
        <p style={{ marginTop: 0 }}>{label}</p>
     </div>
     <div className="wrap-options">
         {options.map((option, index) => {
              return (
                  <div key={index} style={this.getBtnStyle(index, options.length)}>
                      <button style={{ width: '100%' }} type="button" className="btn" onClick={() => this.btnClick(option)}>{option}</button>
                  </div>
              )
          })}
    </div>
</div>

ReactJS：

getBtnStyle(index, length) {
    return index < length - 1 ? { marginBottom: 10, flexShrink: 0, width: '100%' } : { flexShrink: 0, width: '100%' };
}