What's the simplest way to make vertically aligned parent blocks to grow rightwards as their children grows?

Question

What I want to achieve is something like this:

.parent {
    min-width: 64px;
    width: auto;
    height: 64px;
    background-color: purple;
    display: inline-block;
}

.child {
    width: 24px;
    height: 24px;
    background-color: yellow;
    transition: all 0.5s ease;
}

.child:hover {
    width: 256px;
}

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>
<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>
<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

The key that I was able to make the parents grow as their children grow is by using display: inline-block for the parent, but to make them align vertically I have to use an extra wrapper for each parent, or placing a <br> after each parent like this:

<div class="parent">
    <div class="child"></div>
</div><br>
<div class="parent">
    <div class="child"></div>
</div><br>
<div class="parent">
    <div class="child"></div>
</div><br>

But in doing so there is always a tiny gap that I couldn't remove between the parents. Is there a way to remove the wrapper to make the structure simpler like this to work (to have the same effect as the first example):

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>

Temani Afif · Accepted Answer · 2019-07-04T14:20:28.397

Use float and clear after each element:

.parent {
  min-width: 64px;
  height: 64px;
  background-color: purple;
  float:left;
  clear:left;
}

.child {
  width: 24px;
  height: 24px;
  background-color: yellow;
  transition: all 0.5s ease;
}

.child:hover {
  width: 256px;
}

<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>

Or use min-content in the width. Simply pay attention to the support: https://caniuse.com/#feat=intrinsic-width

.parent {
  min-width: 64px;
  height: 64px;
  background-color: purple;
  width:min-content;
}

.child {
  width: 24px;
  height: 24px;
  background-color: yellow;
  transition: all 0.5s ease;
}

.child:hover {
  width: 256px;
}

<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>

I wonder if it is wise to use float still in 2019. You should not need it — Niek Nijland, Jul 04 '19 at 14:20
@NiekNijland it will be still wise to use float even in 2030 (I don't remember I read somewhere that float will be obsolete). Flexbox should not be the magic automatic solution for everyting. Actually my *float* solution achieve the needed requirement — Temani Afif, Jul 04 '19 at 14:22

score -1 · Answer 2 · answered Jul 04 '19 at 14:06

Wrap all your parents in a wrapper and use flexbox.

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.parent {
    min-width: 64px;
    width: auto;
    height: 64px;
    background-color: purple;
    display: inline-block;
}

.child {
    width: 24px;
    height: 24px;
    background-color: yellow;
    transition: all 0.5s ease;
}

.child:hover {
    width: 256px;
}

<div class="wrapper">
  <div class="parent">
      <div class="child"></div>
  </div>
  <div class="parent">
      <div class="child"></div>
  </div>
  <div class="parent">
      <div class="child"></div>
  </div>
</div>

*"Is there a way to **remove the wrapper** to make the structure simpler "* — Paulie_D, Jul 04 '19 at 14:08
@Paulie_D He meant to remove the wrapper he wraps around every parent right? — Niek Nijland, Jul 04 '19 at 14:19

score -1 · Answer 3 · answered Jul 04 '19 at 14:21

-1

adding font-size:0 for inline element parent here .wrapper will remove the gap!

answered Jul 04 '19 at 14:21

adel

3,436
1
7
20

What's the simplest way to make vertically aligned parent blocks to grow rightwards as their children grows?

3 Answers3