CODEWITHSUNDEEP
cssflexbox
Shankar Regmi
Shankar Regmi

Reputation: 874

Expand flex container respective to its children with flex grow

I have a container that has fixed width and inside that I have a flexible menu with display: flex

I want the menu-list to grow upto max-width: 420px, and if it reaches max-width it should wrap and display in next line, so I can't use white-space: nowrap which makes my menu-list scrollable if it exceeds 420px. How can I make the parent menu expand proportionally with menu-list. The red background should expand 420px in the example below.

.container {
  display: block;
  padding: 10px;
  width: 180px;
}

.menu {
  background-color: red;
  display: inline-flex;
}

.menu-list {
  margin: 10px;
  flex: 1 0 auto;
  max-width: 420px;
}
<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick brown fox jumps over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 172

Answers (2)

Temani Afif
Temani Afif

Reputation: 272590

Here is an idea using width: max-content; (that will not work on IE: https://caniuse.com/#feat=mdn-css_properties_width_max-content)

.container {
  padding: 10px;
  margin:5px;
  max-width: 180px;  
}
.menu {
  background-color: red;
  display: inline-block;
}
.menu-list {
  margin: 10px;
  width:max-content;
  max-width: 420px;
}
<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick brown fox jumps over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick  brown fox jumps over the lazy dog brown fox jump s over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick  brown fox</div>
      <div class="option">2. The quick brown </div>
      <div class="option">3. The quick bro</div>
      <div class="option">4. The qui</div>
    </div>
  </div>
</div>

Another idea using CSS grid. 

.container {
  padding: 10px;
  margin:5px;
  max-width: 180px;  
}
.menu {
  background-color: red;
  display: inline-grid;
  grid-auto-columns: max-content;
}
.menu-list {
  margin: 10px;
  max-width: 420px;
}
<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick brown fox jumps over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick  brown fox jumps over the lazy dog brown fox jump s over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog</div>
      <div class="option">3. The quick brown fox jumps over the lazy dog</div>
      <div class="option">4. The quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick  brown fox</div>
      <div class="option">2. The quick brown </div>
      <div class="option">3. The quick bro</div>
      <div class="option">4. The qui</div>
    </div>
  </div>
</div>

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 370993

If the .menu-list has a maximum width of 420px, then why not just give .menu the same maximum?

Then make the top level wrapper a flex container and disable shrinking on .menu.

.container {
  display: flex;
  max-width: 180px;
  border: 2px dashed black;
}

.menu {
  flex-shrink: 0;
  max-width: 420px;
  border: 2px solid green;
}

.menu-list {}
<div class="container">
  <div class="menu">
    <div class="menu-list">
      <div class="option">1. The quick brown fox jumps over the lazy dog</div>
      <div class="option">2. The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog</div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions