css - How to use flexbox to make two columns of same width?

Question

I'm just starting my flexbox journey and have encountered the silliest problem: I can't figure out how to have two columns of equal width.

My markup looks like this:

<div class="flex-wrap">
  <div class="left-col"></div>
  <div class="right-col"></div>
</div>

and my css is

.flex-wrap {
  display: flex;
  flex: 2 1 auto;
}

They start out equal width, and responsively remain the same width UNTIL a certain point at which the content of left begins to push it larger.

How can I assure they stay the same width?

question from:https://stackoverflow.com/questions/66054289/how-to-use-flexbox-to-make-two-columns-of-same-width

Answer 1

Use flex properties like so.

.flex-wrap {
  display: flex;
}

.flex-wrap div {
  flex: 1 0 50%;
  border: 1px solid red;
}

<div class="flex-wrap">
  <div class="left-col">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores aliquid suscipit, id perferendis quos at assumenda repellat libero itaque obcaecati velit sunt asperiores non nisi.</div>
  <div class="right-col">Lorem ipsum dolor sit amet.</div>
</div>