Popup "Hides" Under Another

[harrisoncramer]

I'm trying to build a layout that looks like the following, where the top and bottom sections are predefined in size and the middle section grows to fill the remaining available container:

Here's the code:

local Layout = require("nui.layout")
local Popup = require("nui.popup")

local opts = {
  buf_options = {
    filetype = "markdown",
  },
  focusable = true,
  border = {
    style = "rounded",
  },
}

local box_one = Popup(opts)
local box_two = Popup(opts)
local box_three = Popup(opts)

local layout = Layout(
  {
    position = "50%",
    relative = "editor",
    size = {
      width = "95%",
      height = "95%",
    },
  },
  Layout.Box({
    Layout.Box(box_one, { size = { height = 3 } }),
    Layout.Box({
      Layout.Box(box_two, { grow = 1 }),
      Layout.Box(box_three, { size = { height = 15 } }),
    }, { dir = "col", size = "100%" }),
  }, { dir = "col" })
)

layout:mount()

For some reason, it looks like box one and box two overlap, and when one is focused (either one) it hides the content in the other box. Am I doing something wrong here?

[MunifTanjim]

Try this instead?

local layout = Layout(
  {
    position = "50%",
    relative = "editor",
    size = {
      width = "95%",
      height = "95%",
    },
  },
  Layout.Box({
    Layout.Box(box_one, { size = 3 }),
    Layout.Box(box_two, { grow = 1 }),
    Layout.Box(box_three, { size = 15 }),
  }, { dir = "col" })
)

[harrisoncramer]

Wow thank you very much, it's quite simple! Thank you!