Clash Royale CLAN TAG#URR8PPP

flexbox with expandable children

I have the this layout (starting layout). The boxes inside are expandable in height (description text). If a box is expanded, the row should not be affected only the column. I'm using the bootstrapgrid.

starting layout

bootstrap

is this even possible?

Current behavior: https://jsfiddle.net/kunji/t91xppcx/

The problem is that the boxes in the same row also grow in height.

starting layout:

+-------------------+
| +---+ +---+ +---+ |
| | | | | | | |
| +---+ +---+ +---+ |
| +---+ +---+ +---+ |
| | | | | | | |
| +---+ +---+ +---+ |
+-------------------+


desired layout:

+-------------------+
| +---+ +---+ +---+ |
| | | | | | | |
| | | +---+ +---+ |
| | | +---+ +---+ |
| +---+ | | | | |
| +---+ +---+ +---+ |
| | | |
| +---+ |
+-------------------+


html

<div class="row">
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>


1 Answer
1

The quickest way I see is too divide it into the number of columns first that you would like to display on your page or container, then it won't affect the entire row (of multiple table cells and columns) when you want to expand the row in one single column. You then can use flex inside of each column to lay it out however you want, but you can probably easily manage it with just bootstrap grid in this case.
For a more dynamic webpage, you can add bootstrap class col-xs-12 col-sm-4 with Jquery depends on the number of columns you want to have, and use the same idea to divide the articles into the number of columns that you want.

flex

col-xs-12 col-sm-4

var $clickme = $('.clickme'),
$box = $('.box');

$box.hide();

$clickme.click( function(e)
$(this).text(($(this).text() === 'Hide' ? 'Show' : 'Hide')).next('.box').slideToggle();
e.preventDefault();
);

.yellow
background: yellow

.pink
background: pink

.grey
background: grey

.article
background: tomato;
margin: 5px;
display: flex;
flex-direction: column;

.article img
width: 100%;


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-4 yellow">
<div class="article">
1
</div>
<div class="article">
2
</div>
</div>
<div class="col-xs-12 col-sm-4 pink">
<div class="article">
<img src="https://picsum.photos/400/300/?random"/>
<p>3</p>
<a href="#" class="clickme content">More</a>
<p class="box content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
</div>
<div class="article">
4
</div>
<div class="article">
5
</div>
</div>
<div class="col-xs-12 col-sm-4 grey">
<div class="article">
6
</div>
<div class="article">
<img src="https://picsum.photos/400/290/?random"/>
<p>7</p>
<a href="#" class="clickme content">More</a>
<p class="box content">
Lorem Ipsum
</p>
</div>
</div>
</div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.