Flexbox Confusion

[SilverSerpent]

Here I have some basic HTML:

<div class="content">
        <aside>
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium inventore excepturi aliquid sed similique commodi ducimus numquam fuga culpa quidem porro aperiam sapiente ea quasi iusto facere ut maxime quisquam ullam maiores alias illum labore in officia eligendi eius at sit animi eos. Esse sunt quo accusantium autem omnis. Eveniet provident nulla corporis culpa quaerat atque iste veritatis. Asperiores iure similique alias dolore ea suscipit accusamus possimus quo distinctio provident adipisci nobis reprehenderit aliquid nam iusto tempore voluptates maiores amet cum ipsam eum qui aperiam sapiente recusandae neque veniam voluptatem nemo vero incidunt magnam veritatis fugit vel temporibus cumque rem.
        </aside>
        <section>
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos cupiditate eaque animi iste laboriosam illum ullam voluptatem illo mollitia veniam corporis eligendi in vitae asperiores sed reiciendis adipisci doloremque incidunt distinctio unde quidem soluta deleniti ratione nam nesciunt placeat possimus veritatis consequatur quia tempora repellendus perspiciatis quo consectetur accusamus totam impedit quod officiis. Suscipit blanditiis dignissimos molestias corporis architecto vero optio unde odio repellendus aperiam amet eaque quo praesentium repellat labore maxime nihil quisquam commodi magni exercitationem quod est veritatis error explicabo ea voluptate mollitia porro expedita iusto facere deserunt saepe illum nobis. Sed beatae magnam adipisci id dicta rem?
        </section>
    </div>

and then the CSS is as follows:

.content { display: -webkit-flex; }

aside { flex: 1; }

section { flex: 1; }

Everything works out well with the two columns showing up next to each other with equal widths. This current example has 100 words in each paragraph. However, when I increase the second section to 200 words, it become twice as big as the first column, resulting in unequal column widths. Is there a flexbox property to make these columns stay equal widths and expand vertically to accommodate extra content? Thanks!

[Paulie_D]

A Codepen example would help but have you set widths on these columns?

If you haven’t then they will flex as they are supposed to do. Try setting a width of 50% on them.

[SilverSerpent]

Here is the Codepen: http://cdpn.io/cAdny

I have figured out the problem though. In my Codepen, if prefix-free is turned off under the CSS settings then you can see the problem I was having: the two columns become unequal widths, which from what I understood about flexbox should not have been the case. As it turns out, I was testing in Chrome on my local machine and -webkit-flex: 1 is still needed for webkit browsers, which I was unaware of. Thank you for your help!

[Author]

Posts