lundi 20 avril 2015

Flex layout is not honoring width of fixed columns

I'm having problems with the bottom div getting wider when adding alot of text to the center div.

HTML:

<body>

<div class="k-box k-flex k-flex-row black k-flex-item">
    <div class="k-box cyan" style="width: 200px;">
        <div class="k-box" style="height: 100%;">Left which should always be 200px!</div>
    </div>
    <div class="k-box k-flex k-flex-column  k-flex-item">
        <div class="k-panel k-flex k-flex-column  k-flex-item">
            <div class="k-box k-flex-item" style="">When the text is short it works!</div>
        </div>
    </div>
    <div class="k-box green" style="width: 200px;">right</div>
</div>

<br />

<div class="k-box k-flex k-flex-row k-flex-item" style="">
    <div class="k-box cyan" style="width: 200px;">
        <div class="k-box" style="height: 100%;">Left which should always be 200px!</div>
    </div>
    <div class="k-box k-flex k-flex-column k-flex-item">
        <div class="k-panel k-flex k-flex-column  k-flex-item">
            <div class="k-box k-flex-item">When long... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula ante eget aliquam semper. Vestibulum aliquam rhoncus sem nec tristique. Aenean sagittis turpis tellus, asemper tellus laoreet eu. Suspendisse condimentum auctor sapien eget ullamcorper. In a efficitur neque, vel ullamcorper nulla. Vestibulum sed suscipit neque. Ut in blandit erat. Aliquam sed feugiat nulla, vel porttitor tortor. Curabitur interdum turpis et dolor lobortis, non eleifend diam ornare. In sem nisi, egestas eget nisl ac, lobortis tristique sem.</div>
        </div>
    </div>
    <div class="k-box green" style="width: 200px;">right</div>
</div>

</body>

CSS

div.k-flex {
    border: solid 1px red;
}

.k-box {
    position: relative;
}

.k-flex {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.k-flex-item {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.k-flex-row {
    flex-direction: row;
    -webkit-flex-direction: row;
}

.k-flex-column {
    flex-direction: column;
    -webkit-flex-direction: column;
}

How can I make the left and right column in the bottom div stay 200px wide and also make the middle automatically start scrolling when content is getting to tall for the div?

Fiddle:

http://ift.tt/1JnoSX6

Aucun commentaire:

Enregistrer un commentaire