Forums

Give help. Get help.

  • # July 17, 2017 at 9:48 am

    Hi, I’m trying to do a (apparently not so) simple app layout. It consists of one container with two cells.

    Below 25em the two cells should be in one column. Above 25em they should be side by side. Both cells should fill the size of the container. The last cell should show scrollbars, if necessary.

    Since the layout is for a responsive web component I can not use media queries. Here’s what I have so far. The missing piece is enabling overflow when the cells are in one column (below 25em).

    https://codepen.io/anon/pen/YQbzer

    Been struggling with this… Any help would be greatly appreciated!

    # July 17, 2017 at 2:34 pm

    Put max-height:50vh; on .overflow?

    Also, why not use flex-basis:25em; flex-grow:1; on .container > * instead of what you have there already? i.e. The “Fab Four” calc method, which seems to make more sense in circumstances where no flexbox at all can be used. Why mix them? If you’re using flexbox, why not use it all the way?

    # July 17, 2017 at 10:13 pm

    I should of course have mentioned that users will be able to resize the width and height of .container. So unfortunately I can’t set a fixed height on any children.

    Flex-basis+grow works nicely for the layout. Thank you. Just need it to overflow below 25em now..

    Updated version: https://codepen.io/anon/pen/eRaRYo

    # July 17, 2017 at 10:47 pm

    This maybe https://codepen.io/anon/pen/vZwZde

    # July 18, 2017 at 1:53 am

    Thank you! Works great.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag