How to expand to the full height of the story

See original GitHub issue

I’m having problems trying to accomplish something that should be quite simple, I wanna have a container in my story that expands to the full height of the story “canvas” I’m trying setting the style of this container component like flex:1 but it doesn’t work, I’m using storybook-addon-scissors to set the size of my story and I would like the content of my story to adapt as I change its container size. This container component Instead of expanding like expected with flex: 1 it just expands according to the content inside it.

Thanks in advance to anyone that can shed some light here.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:1
  • Comments:17 (9 by maintainers)

github_iconTop GitHub Comments

23reactions
unframeworkcommented, Dec 7, 2020

Just as an FYI for anyone reading this later - if you are using the newer Storybook format (where stories are defined as simple exports, aka CSF) you can set the following in your story file’s default export to remove body margins:

export default {
  parameters: {
    layout: 'fullscreen'
  }
};

However, this will not set your root div to be height: 100%. You will still need to use the 100vh decorator for that.

12reactions
shilmancommented, Feb 13, 2021

@ghengeveld @ndelangen this seems like a nice addition to the layout parameter, either as a modification to ‘fullscreen’ or as a new option. WDYT?

Read more comments on GitHub >

github_iconTop Results From Across the Web

In bootstrap 4 how to get a row or column to expand to full ...
1 Answer 1 · Use min-vh-100 and flex-column on the parent row · Use flex-grow-1 to fill the height.
Read more >
Creating a Story - Tableau Help
Click the New Story tab. · In the lower-left corner of the screen, choose a size for your story. · By default, your...
Read more >
Sizing items in CSS - Learn web development | MDN
Open the example, resize the browser window, and observe what happens to the size of the box and text. Sizing things according to...
Read more >
Story Ad Specifications - Snapchat's Business Help Center
View the design recommendations and technical specifications for Story Ads. ... Please Note: Asset should be formatted to fit the full height of...
Read more >
How to Expand Your Short Story: 4 Tips for Story Expansion
1. Expand with a purpose. Your expansion should add something meaningful to the story. When expanded, a good story provides a more complete ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found