Question 186359 in Html Question posted in
Some basic documentation can be found here.

Html – how to make a wrapped flex box fill the height

#con {
height: 400px;
width: 300px;
border: solid 1px red;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}

#one {
border: solid 1px green;
flex-grow: 1;
}

#two {
border: solid 1px magenta;
width: 40px;
}

#tre {
width: 100%;
height: 50px;
border: solid 1px blue;
}
<div id="con">
<div id="one">1</div>
<div id="two">2</div>
<div id="tre">3</div>
</div>

if i dont set the height then they autofill, but i dont want both rows to be 50% high

Tags:

2

Answers


  1. 0

    Juste change this :

    #two {
border: solid 1px magenta;
width: 40px;
}

    by :

    #two {
border: solid 1px magenta;
width: 50px;
}

    Thanks

    Login or Signup to reply.
  2. 0

    Please use classes for styling not id’s. If you are not limited by using only flexbox, i would use grid (if you must to have only 3 divs)

          #con {
        height: 400px;
        width: 300px;
        border: solid 1px red;
        /* display: flex;
        flex-wrap: wrap;
        align-content: stretch; */
        display: grid; /* added */
        grid-template-columns: auto 40px; /* added */
        grid-template-rows: auto 50px; /* added */
      }

      #one {
        border: solid 1px green;
        /* flex-grow: 1; */
      }

      #two {
        border: solid 1px magenta;
        /* width: 40px; */
      }

      #tre {
        /* width: 100%;
        height: 50px; */
        border: solid 1px blue;
        grid-column: 1 / 3; /* added */
      }
        <div id="con">
      <div id="one">1</div>
      <div id="two">2</div>
      <div id="tre">3</div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search