3

I'm currently setting display:flex on the parent as well the child element in the middle.

The issue now is since there is a nested flex property applied on the child element. The grandchild elements' height get auto distributed and generate unwanted spacing in between.

How to you remove the extra spacing in between while keeping the display:flex property on the child element?

.parent{
  background:#cdcdcd;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  padding:30px 10px;
  box-sizing: border-box;
}

.child{
  flex-grow:1;
  flex-basis:33.3%;
  padding:10px;
  background:#a2a2a2;
  box-sizing: border-box;
}

.child:nth-child(3){
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  padding:10px;
  align-items: flex-start;
}

.grandchild {
    padding: 10px;
    background: #696969;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
    box-sizing: border-box;
}
<div class="parent">
  <p style="position:absolute; top:-2px; left:28px;">parent</p>
  <div class="child">child<br />

    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.

    </p>

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

    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.

    </p>
  </div>
</div>
splash
  • 13,037
  • 1
  • 44
  • 67
Vincent1989
  • 1,593
  • 2
  • 13
  • 25

1 Answers1

4

You can do it with the align-items: flex-start set on the .parent element (flex-container):

.parent {
  background: #cdcdcd;
  display: flex;
  /*flex-direction: row; by default*/
  flex-wrap: wrap;
  align-items: flex-start; /* added */
  padding: 30px 10px;
  box-sizing: border-box;
}

.child {
  flex: 1 1 33.33%; /* shorthand */
  padding: 10px;
  background: #a2a2a2;
  box-sizing: border-box;
}

.child:nth-child(3){
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  padding: 10px;
  align-items: flex-start;
}

.grandchild {
  padding: 10px;
  background: #696969;
  flex: 1 0 100%; /* shorthand */
  box-sizing: border-box;
}
<div class="parent">
  <p style="position:absolute;top:-2px;left:28px">parent</p>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
  <div class="child">child
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
  </div>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
</div>

By default the value of the align-items property is set to stretch, which makes flex-items fill the flex-container cross axis (y) where the height of all items, therefore flex-container, is dictated by the height of the "tallest" one.

Addition:

If you prefer visually nicer solutions:

Solution #2:

.parent {
  background: #cdcdcd;
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  padding: 30px 10px;
  box-sizing: border-box;
}

.child {
  flex: 1 0 33.33%;
  padding: 10px;
  background: #a2a2a2;
  box-sizing: border-box;
}

.child:nth-child(3){
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  padding: 10px;
  /*align-items: flex-start; commented out*/
  align-self: flex-start; /* added */
}

.grandchild {
  padding: 10px;
  background: #696969;
  flex: 1 0 100%;
  box-sizing: border-box;
}
<div class="parent">
  <p style="position:absolute;top:-2px;left:28px">parent</p>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
  <div class="child">child
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
  </div>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
</div>

Solution #3:

.parent {
  background: #cdcdcd;
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  padding: 30px 10px;
  box-sizing: border-box;
}

.child {
  flex: 1 1 33.33%;
  padding: 10px;
  background: #a2a2a2;
  box-sizing: border-box;
}

.child:nth-child(3){ /* added additional wrapper div to html */
  display: flex;
  flex-direction: column; /* modified */
  flex-wrap: wrap;
  padding: 10px;
  /*align-items: flex-start;  commented out*/
}

.grandchild {
  padding: 10px;
  background: #696969;
  flex: 1 0 100%;
  box-sizing: border-box;
}
<div class="parent">
  <p style="position:absolute;top:-2px;left:28px">parent</p>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
  <div class="child">child
    <div> <!-- additional wrapper div -->
      <div class="grandchild">grandchild</div>
      <div class="grandchild">grandchild</div>
      <div class="grandchild">grandchild</div>
    </div>
  </div>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
</div>
VXp
  • 11,598
  • 6
  • 31
  • 46