CODEWITHSUNDEEP
cssflexbox
Adavo
Adavo

Reputation: 925

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.

image of the issue

Upvotes: 9

Views: 43856

Answers (1)

zer00ne
zer00ne

Reputation: 43863

.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>

Upvotes: 6

Related Questions