title: React Datepicker won't shrink to parent container
body: <p>I'm having a difficult time getting <a href="https://www.npmjs.com/package/react-datepicker" rel="nofollow noreferrer">react-datepicker</a> to shrink to its parent container within my code. I have found suggestions on giving it a new stylesheet <a href="https://github.com/Hacker0x01/react-datepicker/issues/624#issuecomment-261696513" rel="nofollow noreferrer">here</a>, but I'm not sure what is the recommended way for styling a pre-made react component. Here is my code block:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;Card style={{height: '96%'}}&gt;
                              &lt;CardHeader&gt;
                                  Refine By:
                              &lt;/CardHeader&gt;
                              &lt;CardBody&gt;
                                  &lt;h6&gt;Release Date Range:&lt;/h6&gt;
                                  &lt;Row&gt;
                                      &lt;Col&gt;
                                          &lt;div style={{paddingBottom: 10,width:'100%',display:'block',backgroundColor:'red'}}&gt;
                                              &lt;DatesForm dateFilter={this.state.dateFilter} logDates={this.logDates}
                                                         type={'start'} updateTable={this.filterData} style={{width:'100%'}}/&gt;
                                          &lt;/div&gt;
                                      &lt;/Col&gt;
                                      &lt;Col&gt;
                                          &lt;div style={{paddingBottom: 20}}&gt;
                                              &lt;DatesForm dateFilter={this.state.dateFilter} logDates={this.logDates}
                                                         type={'end'} updateTable={this.filterData}
                                                         style={{width:'100%'}}/&gt;
                                          &lt;/div&gt;
                                      &lt;/Col&gt;
                                  &lt;/Row&gt;
                              &lt;/CardBody&gt;
                          &lt;/Card&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>