diff --git a/README.md b/README.md
index 0974bbc..b0a7bad 100755
--- a/README.md
+++ b/README.md
@@ -69,3 +69,5 @@ There are two optional props that can be passed.
 * **minFontSize** - the minimum font size to scale down to (_floor_) - default `Number.NEGATIVE_INFINITY`
 * **maxFontSize** - the maximum font size to scale up to (_ceiling_) - default `Number.POSITIVE_INFINITY`
 * **widthOnly** - will scale the element based on the width of it's container only, not the height - default `false`
+* **fitParent** - will calculcate width based on the parent div width and use fit-content when font don't scaled - default `false`
+* **parentDiff** - diff for width when used **fitParent**
\ No newline at end of file
diff --git a/docs/react-scale-text.js b/docs/react-scale-text.js
index cb95518..f6b1c68 100644
--- a/docs/react-scale-text.js
+++ b/docs/react-scale-text.js
@@ -969,6 +969,7 @@ function (_Component) {
       if (this.shouldResize()) {
         this.resize();
         window.addEventListener('resize', this._handleResize);
+        window.addEventListener('load', this._handleResize);
       }
     }
   }, {
@@ -984,6 +985,7 @@ function (_Component) {
     value: function componentWillUnmount() {
       if (!this.shouldResize()) {
         window.removeEventListener('resize', this._handleResize);
+        window.removeEventListener('load', this._handleResize);
       }
     }
   }, {
@@ -1027,11 +1029,23 @@ function (_Component) {
       // Create copy of wrapper for sizing
       this.ruler = this._wrapper.cloneNode(true);
       this.ruler.id = (0, _shortid.generate)();
+      var nodeWidth = '';
+
+      if (this.props.fitParent) {
+        nodeWidth = (0, _domUtils.getStyle)(this._wrapper.parentNode, 'width');
+
+        if (this.props.parentDiff !== undefined) {
+          nodeWidth = "calc(".concat(nodeWidth, " - ").concat(this.props.parentDiff, ")");
+        }
+      } else {
+        nodeWidth = (0, _domUtils.getStyle)(this._wrapper, 'width');
+      }
+
       (0, _domUtils.css)(this.ruler, {
         position: 'absolute',
         top: '0px',
         left: 'calc(100vw * 2)',
-        width: (0, _domUtils.getStyle)(this._wrapper, 'width'),
+        width: nodeWidth,
         height: (0, _domUtils.getStyle)(this._wrapper, 'height')
       });
       document.body.appendChild(this.ruler);
@@ -1053,7 +1067,9 @@ function (_Component) {
       var fontSize = this.state.size;
       var _props2 = this.props,
           children = _props2.children,
-          widthOnly = _props2.widthOnly;
+          widthOnly = _props2.widthOnly,
+          maxFontSize = _props2.maxFontSize,
+          fitParent = _props2.fitParent;
       var overflowStyle = widthOnly ? {
         overflowY: 'visible',
         overflowX: 'hidden',
@@ -1062,10 +1078,15 @@ function (_Component) {
         overflow: 'hidden'
       };
       var child = _react.default.isValidElement(children) ? _react.default.Children.only(children) : _react.default.createElement("span", null, children);
+      var nodeWidth = '100%';
+
+      if (fitParent && fontSize !== null && maxFontSize - fontSize < Number.EPSILON) {
+        nodeWidth = 'fit-content';
+      }
 
       var style = _extends({
         fontSize: fontSize ? "".concat(fontSize.toFixed(2), "px") : 'inherit',
-        width: '100%',
+        width: nodeWidth,
         height: '100%'
       }, overflowStyle);
 
@@ -1089,12 +1110,16 @@ ScaleText.propTypes = {
   children: _propTypes.default.node.isRequired,
   minFontSize: _propTypes.default.number.isRequired,
   maxFontSize: _propTypes.default.number.isRequired,
-  widthOnly: _propTypes.default.boolean
+  widthOnly: _propTypes.default.bool,
+  fitParent: _propTypes.default.bool,
+  parentDiff: _propTypes.default.string
 };
 ScaleText.defaultProps = {
   minFontSize: Number.NEGATIVE_INFINITY,
   maxFontSize: Number.POSITIVE_INFINITY,
-  widthOnly: false
+  widthOnly: false,
+  fitParent: false,
+  parentDiff: undefined
 }; // export default ScaleText;
 
 module.exports = ScaleText;
diff --git a/src/index.js b/src/index.js
index b788435..08a68c5 100755
--- a/src/index.js
+++ b/src/index.js
@@ -39,6 +39,7 @@ class ScaleText extends Component {
     if (this.shouldResize()) {
       this.resize();
       window.addEventListener('resize', this._handleResize);
+      window.addEventListener('load', this._handleResize);
     }
   }
 
@@ -54,6 +55,7 @@ class ScaleText extends Component {
   componentWillUnmount() {
     if (!this.shouldResize()) {
       window.removeEventListener('resize', this._handleResize);
+      window.removeEventListener('load', this._handleResize);
     }
   }
 
@@ -93,11 +95,21 @@ class ScaleText extends Component {
     // Create copy of wrapper for sizing
     this.ruler = this._wrapper.cloneNode(true);
     this.ruler.id = shortId();
+    let nodeWidth = '';
+    if (this.props.fitParent) {
+      nodeWidth = getStyle(this._wrapper.parentNode, 'width');
+      if (this.props.parentDiff !== undefined) {
+        nodeWidth = `calc(${nodeWidth} - ${this.props.parentDiff})`;
+      }
+    }
+    else {
+      nodeWidth = getStyle(this._wrapper, 'width');
+    }
     css(this.ruler, {
       position: 'absolute',
       top: '0px',
       left: 'calc(100vw * 2)',
-      width: getStyle(this._wrapper, 'width'),
+      width: nodeWidth,
       height: getStyle(this._wrapper, 'height')
     });
     document.body.appendChild(this.ruler);
@@ -112,7 +124,7 @@ class ScaleText extends Component {
 
   render() {
     const { size: fontSize } = this.state;
-    const { children, widthOnly } = this.props;
+    const { children, widthOnly, maxFontSize, fitParent } = this.props;
 
     const overflowStyle = widthOnly ?
       { overflowY: 'visible', overflowX: 'hidden', height: 'auto' } :
@@ -122,9 +134,14 @@ class ScaleText extends Component {
       React.Children.only(children) :
       (<span>{children}</span>);
 
+    let nodeWidth = '100%';
+    if (fitParent && fontSize !== null && (maxFontSize - fontSize) < Number.EPSILON) {
+      nodeWidth = 'fit-content';
+    }
+
     const style = {
       fontSize: fontSize ? `${fontSize.toFixed(2)}px` : 'inherit',
-      width: '100%',
+      width: nodeWidth,
       height: '100%',
       ...overflowStyle
       // overflow: 'hidden'
@@ -154,13 +171,17 @@ ScaleText.propTypes = {
   children: PropTypes.node.isRequired,
   minFontSize: PropTypes.number.isRequired,
   maxFontSize: PropTypes.number.isRequired,
-  widthOnly: PropTypes.bool
+  widthOnly: PropTypes.bool,
+  fitParent: PropTypes.bool,
+  parentDiff: PropTypes.string
 };
 
 ScaleText.defaultProps = {
   minFontSize: Number.NEGATIVE_INFINITY,
   maxFontSize: Number.POSITIVE_INFINITY,
-  widthOnly: false
+  widthOnly: false,
+  fitParent: false,
+  parentDiff: undefined
 };
 
 // export default ScaleText;