title: Vaadin 21: Nesting Scroller into VerticalLayout problem
body: <p>Given a <code>Composite</code> with 3 nested <code>VerticalLayout</code>s, with full height each<br />
  And a <code>Scroller</code> nested into the innermost <code>VerticalLayout</code>,<br />
  And the <code>Scroller</code> contains a fourth <code>VerticalLayout</code> with 20 <code>Button</code>s</p>
  <p>When the <code>Composite</code> is rendered</p>
  <p>Then I would expect that the outermost <code>VerticalLayout</code> is fully visible on screen<br />
  And the <code>VerticalLayout</code>s and the scroller are neatly nested<br />
  And the <code>Scroller</code> is as small as required so everything fits on screen<br />
  And it is not possible to scroll the outer <code>VerticalLayout</code>s at all (as long as the screen is large enough to hold 4 <code>VerticalLayout</code>s, a <code>Scroller</code>, and at least one <code>Button</code></p>
  <p><strong>But</strong> the outermost <code>VerticalLayout</code> does not fit on screen<br />
  The <code>Scroller</code> allows scrolling through the <code>Button</code>s, but the last <code>Button</code> can only be seen when the 3 outer <code>VerticalLayout</code>s are scrolled (which is not supposed to happen).<br />
  Scrolling the 3 outer <code>VerticalLayout</code>s shows a weird overlap of the outer <code>VerticalLayout</code>s.</p>
  <p>Initial State</p>
  <p><a href="https://i.stack.imgur.com/IbT1n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IbT1n.png" alt="initial state" /></a></p>
  <p>After scrolling the <code>Scroller</code> to the bottom</p>
  <p><a href="https://i.stack.imgur.com/hc3Wj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hc3Wj.png" alt="after scroller scrolling" /></a></p>
  <p>After scrolling the whole canvas to the bottom</p>
  <p><a href="https://i.stack.imgur.com/BvqcF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BvqcF.png" alt="after canvas scrolling" /></a></p>
  <p>How do I achieve the desired nesting/scrolling behavior?</p>
  <p>Here is my code</p>
  <pre><code>@Route(&quot;3_scrollerx&quot;)
  public class ScrollerxView extends Composite&lt;Component&gt; {
      @Override
      protected Component initContent() {
          final VerticalLayout lvl1 = new VerticalLayout(new Label(&quot;lvl1&quot;));
          final VerticalLayout lvl2 = new VerticalLayout(new Label(&quot;lvl2&quot;));
          final VerticalLayout lvl3 = new VerticalLayout(new Label(&quot;lvl3&quot;));
          final Scroller scroller = new Scroller();
          scroller.setContent(buildScrollerContent());
          scroller.setHeightFull();
  
          List.of(lvl1, lvl2, lvl3).forEach(layout -&gt; {
              layout.setHeightFull();
              layout.getStyle().set(&quot;border&quot;, &quot;1px solid&quot;);
          });
          scroller.getStyle().set(&quot;border&quot;, &quot;1px solid&quot;);
  
          lvl1.add(lvl2);
          lvl2.add(lvl3);
          lvl3.add(scroller); // always weird
          return lvl1;
      }
  
  
      private VerticalLayout buildScrollerContent() {
          final var scrollerContent = new VerticalLayout();
          for (int i = 1; i &lt;= 20; i++) {
              scrollerContent.add(new Button(&quot;Button &quot; + i));
          }
          scrollerContent.setHeightFull();
          return scrollerContent;
      }
  }
  </code></pre>