locked
nested flexbox not working windows app

    Question

  • 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

  • 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