Controlling page height in FlexibleColumnLayout

[ozreads]

Hi.
First thanks for the great work.

I have a problem with FlexibleColumnLayout. I am trying to build a page where I have two columns, but they take the full height of the screen. I tried to have a parent div and the FlexibleColumnLayout as a child and I set the parent div to 100vh min-height, but no luck. I tried to apply 100vh min-height directly on FlexibleColumnLayout but also no luck. I always end up with the screenshot below.

My goal is to acheive something like this:

Sadly, the only way for me to achieve this is by setting a min-height on each column which is not ideal because each column might have more or less content than the other. Here is how my component looks, but without any height.\

const Layout = () => {
  return (
    <FlexibleColumnLayout
      layout={"TwoColumnsStartExpanded"}
      startColumn={
        <div
          style={{
            backgroundColor: "red",
          }}
        >
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Dignissimos, pariatur provident quibusdam voluptate nam aut
            praesentium eligendi distinctio neque fugit quas, id accusantium
            quisquam excepturi corporis placeat quasi! Nemo, cumque.
          </p>
        </div>
      }
      midColumn={
        <div
          style={{
            backgroundColor: "yellow",
          }}
        >
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Dignissimos, pariatur provident quibusdam voluptate nam aut
            praesentium eligendi distinctio neque fugit quas, id accusantium
            quisquam excepturi corporis placeat quasi! Nemo, cumque.
          </p>
        </div>
      }
    />
  );
};
 

[Lukas742]

Hi @ozreads

since this component is developed by the ui5-webcomponents team, I'm going to forward this question to their repo.

---

Hi colleagues,

here you can find the example given by @ozreads in plain html+ui5wc: https://codesandbox.io/s/ui5-webcomponents-forked-2dvvrb?file=/index.html

[ozreads]

Thanks