draw.io How do I set a container element to be vertically scrollable

Question

I can currently add a container element from the sidebar to my diagram and drag and drop text to the container, where each text line added to the container becomes a separately selectable element.

I want, when I drag and drop more text lines to the container than the container can display, is the container to switch to being vertically scrollable instead of the container resizing to accommodate the additional text lines.

Is there a way to accomplish this?

Answer 1

Create a new document,then go to Extras -> Edit Diagram...:

replace the content of the dialog with this:

<mxGraphModel dx="942" dy="546" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="hHBZA0x96M1ugzBaWHee-3" value="&lt;div style=&quot;overflow-y: auto; height: 200px &quot; class=&quot;s-prose js-post-body&quot; itemprop=&quot;text&quot;&gt;&lt;br/&gt;                &lt;br/&gt;&lt;p&gt;I can currently add a container element from the sidebar to my &lt;br/&gt;diagram and drag and drop text to the container, where each text line &lt;br/&gt;added to the container becomes a separately selectable element.&lt;/p&gt;&lt;br/&gt;&lt;p&gt;I want, when I drag and drop more text lines to the container than &lt;br/&gt;the container can display, is the container to switch to being &lt;br/&gt;vertically scrollable instead of the container resizing to accommodate &lt;br/&gt;the additional text lines.&lt;/p&gt;&lt;br/&gt;&lt;p&gt;Is there a way to accomplish this?&lt;/p&gt;&lt;br/&gt;    &lt;/div&gt;&lt;div class=&quot;s-prose js-post-body&quot; itemprop=&quot;text&quot;&gt;&lt;br&gt;&lt;/div&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;overflow: scroll;" parent="1" vertex="1">
      <mxGeometry x="40" y="60" width="320" height="200" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

Main change is:

style="overflow-y: auto; height: 200px "

You'll got something like this:

Then you can duplicate block.

Answer 2

you need to edit html text (double click in text inside a block and click in the button </>) and add a div wrapper with a style <div style="height: 100px ; overflow: scroll"> continue you need to edit style of block and add overflow=fill