CODEWITHSUNDEEP
htmlcssflexbox
John Bergqvist
John Bergqvist

Reputation: 1001

How to make flexbox container only extend to longest inner item?

I'm trying to create a row of flex containers, each with several rows, some of which may be 1 or 2 columns-wide: https://jsfiddle.net/f6ot3vce/1/

This is how i've configured the styling (1 horizontal row of infoboxes, with each infobox containing 1 or more rows of single or 2-column (2x 50% wide) items.

.infoboxes {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.infobox {
  border: 2px solid;
  margin: 2px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1px;
}

.infobox_item {
  flex-basis: 50%;
  align-self: flex-start;
}

.single_col {
  flex-basis: 100%;
}

However i'm having a problem whereby the width of each overall flex container is expanding to fit the page, when I'd prefer it would fit the longest inner element of each container - and no longer (if that's clear from my example).

What do I need to do/change? (In a manner that keeps the 2 columns of each container in line with each other).

Upvotes: 0

Views: 1004

Answers (1)

Piotr Wicijowski
Piotr Wicijowski

Reputation: 2115

I'm afraid it is not really possible to achieve such layout purely with display: flex without resorting to hacks and/or JavaScript crutches. This is because there are two "conflicting" rules that come into play here: the infobox item wants to be 100% or 50% of the parent (so child width is dependent on parent width) and at the same time you want the infobox (the parent) to fit the longest infobox item (so the parend width is dependent on child width)

Fortunately, this layout is achievable by using css grid. If you can do without supported older browsers, then you can get that layout as shown in a fork of your example, or in the snipped below:

.infoboxes {
  display: flex;
  flex-direction: row;
  background-color:orangered;
  align-items: flex-start;
}

.infobox {
  border: 2px solid;
  margin: 2px;
  display: grid;
  padding: 1px;
  background-color: cyan;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

.infobox_item {
  margin: 1px;
  background-color: yellow;
}

.single_col {
  grid-column: span 2;
}

.center {
  text-align:center;
}

body {
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 12px;
}
  <section class="infoboxes">
    <div class="infobox">
      <a class="infobox_item single_col center" href="localhost">Infobox Item (Single Column) (Centered)</a>
      <div class="infobox_item single_col">Infobox Item (Single Column)</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">A Really Really Really Really long Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item single_col center">Infobox Item (Single Column) (Centered)</div>
      <div class="infobox_item single_col center">Infobox Item (Single Column) (Centered)</div>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
    </div>
    <div class="infobox">
      <a class="infobox_item single_col center" href="localhost">Infobox Item (Single Column) (Centered)</a>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
    </div>
  </section>

It basically changes the flex layout of the .infobox class into grid, sets it to have two equally wide columns, removes the flex-basis of children and for full width children it sets the grid column to take up 2 spaces (span 2)

Upvotes: 1

Related Questions