locked
nested flexbox not working windows app RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    when data in getting added to the inner flexconatiner it is creating x-overflow within the inner flex container instead of increasing the width of outer flex container
    Sunday, February 16, 2014 3:50 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi mayanklohani,

    Sorry I don't think flexbox can work together with scrollbar, the purpose of flexbox seems not to be adding scrollbar to the div. Take a look at the documentation: Flexible box ("Flexbox") layout

    If you really need one, try to put a div outside of flexbox and set the scollbar enable.

        <div id="scrollbox">
        <div id="flexContainer">
            <div class="green">1</div>
            <div class="blue">2</div>
            <div class="green">3</div>
            <div class="blue">4</div>
        </div>
    </div>

    <style>
        #scrollbox {
            width: 100px;
            overflow-x:scroll;
        }

        #flexContainer {
            width:200px;
            border: solid 1px #949494;
            display: -ms-flexbox;
            -ms-flex-flow: row nowrap;
        }

        .green {
            width: 50px;
            height: 50px;
            background: #66CC33;
        }

        .blue {
            width: 50px;
            height: 50px;
            background: #0099FF;
        }
    </style>

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    Monday, February 17, 2014 7:15 AM
    Moderator