# Working example of pn.FlexBox with two hv.Curves, sized using the flexbox mechanism

**URL:** <https://discourse.holoviz.org/t/working-example-of-pn-flexbox-with-two-hv-curves-sized-using-the-flexbox-mechanism/5927>\
**Category:** Panel\
**Created:** [August 25, 2023, 7:53pm UTC](https://discourse.holoviz.org/t/working-example-of-pn-flexbox-with-two-hv-curves-sized-using-the-flexbox-mechanism/5927 "2023-08-25T19:53:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hrbigelow](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/hrbigelow/32/5409_2.png) [@hrbigelow](https://discourse.holoviz.org/u/hrbigelow)\
**Post date:** [August 25, 2023, 7:53pm UTC](https://discourse.holoviz.org/t/working-example-of-pn-flexbox-with-two-hv-curves-sized-using-the-flexbox-mechanism/5927/1 "2023-08-25T19:53:14Z")

</div>

Hi,

I wondered if it’s possible to use pn.FlexBox together with hv.Curve (or other holoviews objects) in such a way that the height and width of the individual hv.Curve objects are dictated by the FlexBox. For example, I would like to specify that one curve takes up 2 parts, and the other 1 part of the available width.

I’ve tried various combinations such as the example below, but it seems that the FlexBox cannot dictate the width of the hv.Curves ultimately.

I did see in [Control Size — Panel v1.2.1](https://panel.holoviz.org/how_to/layout/size.html), they say:

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/0/0ae8a37a25aa684fe70fe2a03c13952ce949126b.png)

So, I’m wondering if that is true in this case.

```python
import numpy as np
import holoviews as hv
import panel as pn
from panel.pane.holoviews import HoloViews

d1 = np.random.randn(100,2)
d2 = np.random.randn(100,2)

c1 = hv.Curve(d1)
c2 = hv.Curve(d2)

h1 = HoloViews(c1, min_width=200, max_width=600, width_policy='fit', sizing_mode='stretch_width')
h2 = HoloViews(c2, min_width=200, max_width=600, width_policy='fit', sizing_mode='stretch_width')

kwargs=dict(
    align_content='space-evenly',
    flex_direction='row',
    sizing_mode='stretch_width',
    width_policy='fit',
    justify_content='space-around',
    max_width=1000)

fb = pn.FlexBox(h1, h2, **kwargs)

fb

```

---

<div class="post-metadata">

**Author:** ![ahuang11](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ahuang11/32/4947_2.png) [@ahuang11](https://discourse.holoviz.org/u/ahuang11)\
**Post date:** [August 25, 2023, 10:25pm UTC](https://discourse.holoviz.org/t/working-example-of-pn-flexbox-with-two-hv-curves-sized-using-the-flexbox-mechanism/5927/2 "2023-08-25T22:25:03Z")

</div>

Have you tried using `styles={"width": "fit-content"}`?

> [@A workaround for \`width\_policy="fit"\` + \`sizing\_mode="stretch\_width"\`](https://discourse.holoviz.org/t/a-workaround-for-width-policy-fit-sizing-mode-stretch-width/5822):
>
> Since I don’t think width\_policy is functional (I could be wrong), if you have pn.extension(sizing\_mode="stretch\_width") but… don’t want a component to stretch don’t want to set a fixed width + height don’t want to encounter these warnings when setting sizing\_mode="fixed": (FIXED\_SIZING\_MODE): 'fixed' sizing mode requires width and height to be set: HTML(id='p1194', ...) Use stylesheets or styles: styles=dict(width="fit-content") Before: After:

---

<div class="post-metadata">

**Author:** ![hrbigelow](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/hrbigelow/32/5409_2.png) [@hrbigelow](https://discourse.holoviz.org/u/hrbigelow)\
**Post date:** [August 26, 2023, 12:09am UTC](https://discourse.holoviz.org/t/working-example-of-pn-flexbox-with-two-hv-curves-sized-using-the-flexbox-mechanism/5927/3 "2023-08-26T00:09:02Z")

</div>

Great! Yes, that worked, thanks for the suggestion Andrew. (I’ve confirmed it works both in Jupyter notebook and browser)

Here is the complete working example. It was important to inject the `styles` argument both for the `HoloViews` elements and the FlexBox element. The 4:1 width ratio seems approximate, not sure what’s going on, but perhaps it is a default minimum width that is preventing the true ratio.

```python
hv.extension('bokeh')
# pn.extension(sizing_mode='stretch_width')

d1 = np.random.randn(100,2)
d2 = np.random.randn(100,2)

c1 = hv.Curve(d1)
c2 = hv.Curve(d2)

h1 = HoloViews(c1, styles={'flex-grow': '4'})
h2 = HoloViews(c2, styles={'flex-grow': '1'})

kwargs=dict(
    flex_wrap='nowrap',
    styles={'width': 'fit-content'},
    min_width=1000)

fb = pn.FlexBox(h1, h2, **kwargs)
fb

```

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/f/f062e63405f17244f79e2738d2748a4516f180bb.png)