Navigation

 

Artikel Kategorien

Lets say you want to design three boxes with a space between them under usage of flexbox. Your html structure might look like the following:

<div class="boxes">
  <div class="box-wrapper">
    <div class="box">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  </div>
  <div class="box-wrapper">
    <div class="box">Empty</div>
  </div>
</div>

We want to use the “div.box-wrapper” elements to generate the space. We cant use margins cause of the flexbox model. You might wanna use the following css implementation to display both “div.box” elements with the exact same height. At least you try to.

div {
  box-sizing: border-box;
}

div.boxes {
  display: flex;
  align-content: stretch;
}

div.box-wrapper {
  flex-grow: 1;
  padding: 12px;
}

div.box {
  height: 100%;

  background: #efefef;
}

In Firefox this is rendered in the expected way. You think that both “div.box-wrapper” elements get the exact height because of “align-content: stretch”. In Chrome the “div.box-wrapper” is displayed with the correct height but the “div.box” did not stretch to 100%. Chrome implements the height attribute in a different way firefox does because the current CSS 2.1 paper doesn´t include the “height” attribute so it is to every browser manufacturer how to interpret it. You can find a code example here

The solution to the given problem is to apply the flex property “align-content: stretch” to every children. See a working example here: More

 

Zuletzt aktualisiert am 13.04.2016