How to get a tight div when heights differ?

Question

I have a series of div aligned in a row with flexbox. Their heights differ and the largest one sets a common height for all the div. An example is given in this JSFiddle:

HTML:

<div>
  <div class="big">
    hello
  </div>
  <div>
    bonjour
  </div>
</div>

CSS:

div {
  display: flex;
  flex-direction: row;
  border-color: gray;
  border-style: solid;
  border-width: 5px;
}

.big {
  height: 100px;
}

The box with "hello" is set to 100px and the natural height of the one with "bonjour" is much smaller. It however inherits the height of its bigger neighbour.

How can I have heights driven by the contents rather than by the maximum size of divs within a series of boxes aligned next to each others?

I´m not sure if this is what you want https://jsfiddle.net/fgr1dcct/ — drosam, Jan 29 '16 at 09:18
@DavidRosa: exactly, but using `flexbox` (which I need for general positionning) — WoJ, Jan 29 '16 at 09:24

score 2 · Accepted Answer · answered Jan 29 '16 at 09:26

2

Just use align-items: flex-start; to parent div.

div {
  display: flex;
  flex-direction: row;
  border-color: gray;
  border-style: solid;
  border-width: 5px;
  align-items: flex-start; // Here
}

Working Fiddle

answered Jan 29 '16 at 09:26

ketan

19,129
42
60
98

1

Thank you - this is exactly what I was looking for. – WoJ Jan 29 '16 at 09:31

How to get a tight div when heights differ?

1 Answers1