Custom Dash React components and their children not resizing properly

Starting from this React repository, and following the guides for creating dash components I’ve created a component (dash 0.41 and 1.0) that can resize and be drag-n-dropped just fine. I have also tested callbacks with it and they also work fine.

However, the children of the component do not resize accordingly. When I resize and click on the graph’s “autoscale” it usually resizes (unless it is modified by some other callback), but the text (H4 here) does not. How can I make sure that the children elements are resized accordingly?


Example code (simplified) from the original JS repo:

Code for the component
import React, {Component} from 'react';
import PropTypes from 'prop-types';

import Rnd from 'react-rnd';

export default class ResizeDraggable extends Component {
        this.state = {
            x: props.x,
            y: props.y

	// THIS IS NOT USED CURRENTLY, but may be later used 
	// for callbacks. It was created based on the examples
        // get the value from the DOM node
        const newValue =;
        // update the state!
          x: newValue

    render() {
        const {id, children, minWidth, minHeight,
            style, setProps, x, y} = this.props;

        return (
            <Rnd id={id}
                // starting position
                x: x ? x : 20,  
                y: y ? y : 20,
                width: 200,
                height: 100,
              style={style == null ? { 'border': '10px solid'} : style}

            ><div> // I HAVE TRIED: using " style={{width: x}} " , and removing the div

ResizeDraggable.defaultProps = {};

ResizeDraggable.propTypes = {
     * The ID used to identify this component in Dash callbacks
    id: PropTypes.string,

     * A label that will be printed when this component is rendered.
    label: PropTypes.string.isRequired,

     * The value displayed in the input
    value: PropTypes.string,

     * Dash-assigned callback that should be called whenever any of the
     * properties change
    setProps: PropTypes.func,

    children: PropTypes.element,

    minWidth: PropTypes.number,
    minHeight: PropTypes.number,

    x: PropTypes.number,
    y: PropTypes.number,

    style: PropTypes.object
Example part of code in Dash
dashboard_layout = [

    html.Div([], style={
        'width': '95%',
        'height': '650px',
        'backgroundColor': '#DDCC33',
        'border': "3px solid"
    }, id="dashboard"),

    html.Button("Add component", id="add_dashboard_component", n_clicks=0)

@app.callback(Output('dashboard', 'children'),
              [Input('add_dashboard_component', 'n_clicks')],
              [State('dashboard', 'children')])
def display_output(n_clicks, children):
                    'data': [{
                        'type': 'scatter',
                        'y': [5, 3, 6, 1, 2, 4]
                    'layout': {
                        'title': "Yay",
                        'margin': "10px",
                        # also tried: "height": "200px !important",
                        # also tried: "width": "300px !important"
            label='mah cool label',
            style={"border": "3px dashed"},
    return children

I have no idea how to force the children to not leave the boundaries of the parent, so any direction is appreciated.

Okay, it seems the bug is with the original component. After some further testing it turns out that the problem was not (necessarily) with my code. The div containing the values does indeed resize according to its parent, but the problem stems from that it has it own min-width but the parent (the resize-drag-drop component) can be squeezed to smaller widths than what is possible for the child.


I will continue there. Cheers!