Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Unable to scroll in flex container

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #204869
    sebosek
    Participant

    Hi guys,

    please can you help me how to fix unability to scroll in flex container?
    Here is link. This demo works only in Chrome…
    Thank you and have a nice day!

    S.

    #204870
    Paulie_D
    Member

    I’m using Chrome and I can scroll the page…could you clarify what the issue actually is?

    EDIT: Oh I see, you mean it works in Chrome but not others.

    I’ll check but it might just be a prefix issue.

    Also,, just curious…why column-reverse?

    #204871
    sebosek
    Participant

    Sorry for unclear question. Thing is: in Firefox or IE you can’t scroll across main content, you just see last “blah”s and “blah”s from the beginning are hidden and you can’t see them, bcs you can’t scroll… :/

    E: yeah, I thought maybe I missing some prefixes, but according to MSDN it’s not necessary link

    E2: it’s an application for mobile devices and we want to push all content to bottom (mainly controls and buttons)

    #204877
    Paulie_D
    Member

    E2: it’s an application for mobile devices and we want to push all content to bottom (mainly controls and buttons)

    No need to use column-reverse for that…just use standard column and justify-content:flex-end.

    http://codepen.io/Paulie-D/pen/eNreRW?editors=110

    #204878
    Paulie_D
    Member

    If fact, when I switch it to just column it worked in Firefox.

    http://jsfiddle.net/j76fqec1/1/

    #243385
    yashwanth
    Participant

    Hey sebosek,

    I came across the same PS(problem statement)

    1. Every-time the content is loaded it should be at bottom
    2. It should be able to scroll

    To solve these 2 things you can do this:-

    mainly 3 step which can be modified in your code

    1. Add one more

    <

    div> inside the

    <

    div> and below

    <

    div>

    1. Give .wrapper one more extra css property overflow-y: auto;
    2. Finally give the css property of flex: 0 0 auto; to .main-content and flex: 1 1 auto; to .empty-panel;

    Let me know if you need in-depth discussion on this …. have a nice day

    for the preview you can check here
    http://codepen.io/yashwanth89/pen/JKJBXZ

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.