4

I would like to know if there is a way to align divs inside an flex div, like in the picture. I know I could try something with flex-wrap and justify-content, but the width of the outer div should expend with their children, and flex-wrap and justify-content assumes I have a fixed width and height.

I have found other questions in stack overflow that sets the height of the container. This is not possible on my case.

enter image description here

I have been trying to alocate the three divs like in the picture. The red one is bigger and should expand the height of the parent. The other two are smaller and should fit in just one "column".

In the end, the outer div should expand it's width to their children's width. Now you can see the outer div is bigger.

Here is what I have done, so far:

Codepen

.outer {
  background: #00a2e8;
  display: flex;
}

.inner {
  height: 192px;
  width: 350px;
  background: #22ae4c;
  margin-bottom: 2.72%;
}
.inner + .inner {
  background: #fff200;
  margin-bottom: 0;
}

.inner_featured {
  height: 416px;
  width: 730px;
  background: #ed2624;
  margin-bottom: 0;
  margin-right: 2.72%;
}
<div class="outer">
  <div class="inner_featured"></div>
  <div class="inner"></div>
  <div class="inner"></div>    
</div>
EGS
  • 409
  • 4
  • 23
  • @Michael_B As I explained in the question, I cannot set the height of the container. – EGS Apr 27 '18 at 15:05
  • The height of inner divs is fixed for the sake of the example of how should look. As I explained in the question: "The red one is bigger and should expand the height of the parent. " "...the width of the outer div should expend with their children..." – EGS Apr 27 '18 at 15:09
  • The duplicate offers another solution (GridCSS) where the height of the container isn't needed. But if you can't use Grid, then check the second duplicate, which covers all angles of your question. – Michael Benjamin Apr 27 '18 at 15:10
  • 1
    I going to look into it. – EGS Apr 27 '18 at 15:14
  • 1
    I immediately thought of a CSS Grid solution. [This](https://jsfiddle.net/c2x7k9yr/) might give you an idea of what's possible. not exactly what you need, but worth playing around with. – Belder Apr 27 '18 at 16:41
  • @Belder. I used your solution. It worked like a charm. – EGS Apr 30 '18 at 15:26
  • @EGS great! Glad that I was able to help! I’m still very new to css-grid. Definitely worth learning. – Belder Apr 30 '18 at 23:47
  • 1
    @EGS I also just remembered [a link here](https://webdesign.tutsplus.com/tutorials/css-grid-layout-quick-start-guide--cms-27238) that helped me get a pretty good understanding of Grid. It's quick to go through and will really help you wrap your head around it all. – Belder May 01 '18 at 16:15
  • 1
    This question has not yet been answered. I have a similar question, except I have lots of divs of the same width but different heights (they are form controls) that I want to arrange automatically. – David Spector May 19 '21 at 15:12

0 Answers0