0

How can I make the .right-content stack under the div above it? I'm using flex and flex-basis to make this layout and what I realized is If the left-content is too long, the second div .right-content (social icons) will gets pushed down and wont stack under the first div holding same class. Tried to make the code as short as I can.

Screenshot showing what I'm trying to do

You can see this link

Or check the code below:

div {
  border: 1px solid
}

.wrap {
  margin: 0 auto;
  max-width: 800px;
  overflow: hidden;
}

.content {
  display: flex;
  flex-flow: row wrap;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
  width: 100%;
}

.left-content {
  flex-basis: 65%;
}

.right-content {
  flex-basis: 33%;
  margin-left: auto;
  margin-right: 0;
}
<div class="wrap">
  <div class="wrap__main">
    <div class="content">
      <div class="left-content">
        <div class="content">
          <h2>This is header</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
        <div class="content">
          <h2>This is header</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="right-content">
        <form>
          <input type="text" placeholder="Name">
          <input type="text" placeholder="email">
          <input type="submit" value="Submit">
        </form>
      </div>
      <div class="left-content">
        <div class="content">
          <h2>This is header</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="right-content">
        <a href="http://www.facebook.com/"><img src="http://via.placeholder.com/22/f5f" width="22" alt="Facebook" /></a>
        <a href="http://www.facebook.com/"><img src="http://via.placeholder.com/22/f5f" width="22" alt="Facebook" /></a>
        <a href="http://www.facebook.com/"><img src="http://via.placeholder.com/22/f5f" width="22" alt="Facebook" /></a>
      </div>
    </div>
  </div>
</div>
Adam
  • 1,385
  • 1
  • 10
  • 23
  • 3
    you need to change the layout .. make a colum for your left content and another one for the right content – Temani Afif Apr 09 '18 at 19:31
  • I tried that but then the `flex-basis` wont work? @TemaniAfif – Adam Apr 09 '18 at 19:32
  • it will :) you simply need to nest flex layout and apply flex-basis on the upper one – Temani Afif Apr 09 '18 at 19:33
  • So main container will be `row` and `display: flex` then nested container will be `display: flex` and `column` and add `flex-basis` @TemaniAfif – Adam Apr 09 '18 at 19:46
  • yes that's it ... and you keep the actul flex-basis on the main containers (left and right) .. by the way you may not need flex inside them as by default block element are width:100% – Temani Afif Apr 09 '18 at 19:49
  • I thought about that but the problem is: I cant change the last container's position it will always be with the form while if i want to move it to the end of the main container I might need to manipulate the DOM with JS @TemaniAfif – Adam Apr 09 '18 at 20:00
  • no you can use order property of flexbox to reorder if you want – Temani Afif Apr 09 '18 at 20:03

0 Answers0