CODEWITHSUNDEEP
twitter-bootstrap
vuvu
vuvu

Reputation: 5308

Column with dynamic width

I need a grip with two cols, the left col needs a min-width of 300px the right col shall use the remaining width, similar to css-calc. Is this possible or shall I write custom CSS.

calc(100% - 300px)

HTML

 <div class="col-2"></div>
 <div class="col-10"></div>

Upvotes: 0

Views: 804

Answers (1)

Siavas
Siavas

Reputation: 5090

This is also achievable with flexbox, as follows:

.parent {
  display: flex;
}

.child {
  height: 30px;
}

.col-2 {
  flex: 2;
  min-width: 300px;
}

.col-10 {
  flex: 10;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: green;
}
<div class="parent">
  <div class="child col-2 bg-blue"></div>
  <div class="child col-10 bg-green"></div>
</div>

Snippet also available in this codepen.

Learn more about Flexbox from here.

Read also the CanIUse page for flexbox.

Upvotes: 1

Related Questions