CODEWITHSUNDEEP
css
Gustavo Amgarten
Gustavo Amgarten

Reputation: 396

Div with forced max width when possible

I want to create a div that has a max-width. But also I want that, whenever possible, max-width is achieved.

One could say that this is achievable by using min-width. The problem is that I also want the div to automatically shrink, when needed.

How can I do that?

Upvotes: 1

Views: 790

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can do this with Flexbox, all you need to set is flex-basis or flex: 0 1 300px, so now element will grow to maximum of 300px but it will also shrink if needed as you can see here when you resize window Fiddle

.content {
  display: flex; 
}

.box {
  padding: 10px;
  margin: 1px;
  border: 1px solid black;
}

.box:last-child {
  flex-basis: 300px;
}
<div class="content">
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 1

Related Questions