flexbox height adjust to content

I use a "full design" flexbox. I have a weird issue : I have a container that takes all the remaining space and I want in this container that the child, which is also flexbox, to have their height adjust to their content.

Here is the issue:

body, html {    width:100%;    height:100%;    display:flex;  }    .container {    display:flex;    flex:1;    flex-wrap:wrap;  }    .icon {    width:10vh;    margin:10px;    display:flex;    flex-direction:column;  }  .img {    width:10vh;    height:10vh;    display:flex;    align-items:center;    justify-content:center;    background-color:red;  }    .text {    text-align:center;      }
<div class="container">  <div class="icon">  <div class="img">  </div>  <div class="text">  action 1  </div>  </div>  <div class="icon">  <div class="img">  </div>  <div class="text">  Action 2  </div>  </div>    <div class="icon">  <div class="img">  </div>  <div class="text">  Action 3  </div>  </div>    <div class="icon">  <div class="img">  </div>  <div class="text">  Action 4  </div>  </div>    <div class="icon">  <div class="img">  </div>  <div class="text">  Action 5  </div>  </div>    </div>

As you can see, the icon takes the full height of the container : in fact, I don't want to specify a height because I don't know the text length and really want that, if the content is huge, the icon takes the height of its content ( don't want to cut the text). Moreover, if the page is resized, I really want the icon to be aligned (like on smartphone).

Also, I don't understand why the icon takes the height of its parent and not its content because I didn't specify "flex:1" on it. I assume that the default behaviour it's to fit the content size, but this seems not to be working.

Thanks for your help.

flexbox height adjust to content

Replay

.icon's are flex-column which makes .img's stretch by default unless .icon's have align-items. The reason why I didn't apply align-items to .icon's is because other nested flex-containers/flex-items started collapsing. Instead of adjusting down through the hierarchy, I went up and adjusted .container instead.

The relevant CSS:

.container {
  display: flex;
  flex: 1;         /* If you remove this .container will shrink to wrap around .icon's */
  flex-wrap: wrap;
  justify-content: center;  /* This centers .icon's along a horizontal axis. */
  align-items: baseline;    /* This aligns .icon's along a common baseline vertically. */
  outline: 3px dashed blue; /* To show the size of .container */
}
.icon {
  width: 10vh;
  margin: 10px;
  display: flex;
  flex-direction: column;
  outline: 1px dashed red; /* To show the size of .icon */
}

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
}
.container {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  align-content: flex-start;
  outline: 3px dashed blue;
}
.icon {
  width: 10vh;
  margin: 10px;
  display: flex;
  flex-direction: column;
  outline: 1px dashed red;
}
.img {
  width: 10vh;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.text {
  text-align: center;
}
<div class="container">
  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 1
    </div>
  </div>
  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 2
    </div>
  </div>

  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 3
    </div>
  </div>

  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 4
    </div>
  </div>

  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 5
    </div>
  </div>

</div>
Category: css Time: 2016-01-16 Views: 1
Tags: css flexbox

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.149 (s). 12 q(s)