@ricardo.saumeth

Thanks for reaching out to us.

I did a quick test with Vite and I can display the panel properly. I installed the following packages.

• npm install @refinitiv-ui/elements
• npm install @refinitiv-ui/halo-theme

The code in main.js is:

import './style.css'
import javascriptLogo from './javascript.svg'


import '@refinitiv-ui/elements/layout';
import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
import '@refinitiv-ui/elements/layout/themes/halo/dark';


document.querySelector('#app').innerHTML = `
<ef-layout debug container flex scrollable>    
 <ef-layout>HEADER</ef-layout>
  <ef-layout flex>
    <ef-layout container>
       <ef-layout>ITEM 1</ef-layout>
       <ef-layout>ITEM 2</ef-layout>  
    </ef-layout>
    <ef-layout>ITEM 3</ef-layout>
  </ef-layout>
</ef-layout>
<br/>
<ef-layout flex>
  <ef-layout container flex class="outer" max-height="155px" scrollable>
    <ef-layout class="inner">ITEM 1</ef-layout>
    <ef-layout class="inner">ITEM 2</ef-layout>
    <ef-layout class="inner">ITEM 3</ef-layout>
    <ef-layout class="inner">ITEM 4</ef-layout>
    <ef-layout class="inner">ITEM 5</ef-layout>
    <ef-layout class="inner">ITEM 6</ef-layout>
    <ef-layout class="inner">ITEM 7</ef-layout>
        <ef-layout class="inner">ITEM 1</ef-layout>
    <ef-layout class="inner">ITEM 2</ef-layout>
    <ef-layout class="inner">ITEM 3</ef-layout>
    <ef-layout class="inner">ITEM 4</ef-layout>
    <ef-layout class="inner">ITEM 5</ef-layout>
    <ef-layout class="inner">ITEM 6</ef-layout>
    <ef-layout class="inner">ITEM 7</ef-layout>
  </ef-layout>
  <ef-layout flex class="outer">
    <ef-layout class="inner">ITEM 8</ef-layout>
  </ef-layout>
</ef-layout>
`

I added the following styles in the style.css file.

.outer {
  
  padding: 10px;
}


.inner {
 
  margin: 10px;
  padding: 10px;
  min-height: 35px;
}

The output is:

I hope that this information is of help.