How to ensure column doesn't increase beyond a width percentage

Question

I've made a 2 column layout but the right column is stretching beyond 50% because of the item-container element.

How can I make the column fixed to 50%?

Column CSS:

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background: red;
}

.column-1 {
  flex: 50%;
  height: 100%;
  background: lightblue;
  border-right: 1px solid black;
}

.column-2 {
  flex: 50%;
  height: 100%;
  background: lightgreen;
}

score 2 · Accepted Answer · answered Aug 12 '19 at 02:55

The flex property you're using is a shorthand for three properties: flex-grow, flex-shrink, and flex-basis.

You're using it to set the basis to 50%. To ensure the split between columns remains equal, regardless of content, you need to set flex-shrink to 0. In order to do that with the shorthand however, you'll have to pass in a value for flex-grow as well.

Example:

flex: 0 0 50%;

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

thanks, the scroll isn't showing for the item-container but it's another question :( — doe, Aug 12 '19 at 03:00

How to ensure column doesn't increase beyond a width percentage

1 Answers1