user1575921 user1575921 - 1 year ago 111
CSS Question

change inline-block container height smooth

.a and .b are inline-block with different height in a container
after click


expand width to 100%,
height to 0, that means container only can see
and container height will change to

my problem is how to make the container height change not look like flash, bounce .... make it smooth ... ?

I tried to add transition in container too but not work, I think because I don't set container height, but I don't want to set container height.

$('.a').on('click', function() {

$('.back').on('click', function() {

.container {
width: 400px;
overflow: hidden;
font-size: 0;
white-space: nowrap;

.container >div {
display: inline-block;
vertical-align: top;
font-size: 12px;
.a {
width: 200px;
height: 100px;
background-color: blue;
-webkit-transition: width 0.45s;
transition: width 0.45s;
.b {
width: 200px;
height: 1000px;
background-color: red;
-webkit-transition: max-height 0.45s;
transition: max-height 0.45s;

.container.expand .a {
width: 100%;
.container.expand .b {
max-height: 0;

<script src=""></script>
<div class="back">back</div>

<div class="container">
<div class="a">a</div>
<div class="b">b</div>

<div class="other">other</div>

Answer Source

If I understand your question correctly, you could add $('.b').slideUp(400); in your function.

EDIT: and, of course $('.b').slideDown(400); to bring it back down.