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

Html – Flex: first div has column and next has row

I would like the following layout but I am constrained by the html code. I can only change the CSS.

Column 1 has a defined width but the rows must take up the rest of the width.

+---+----------------+
|   |        2       |
|   |----------------+
| 1 |        3       |
|   |----------------+
|   |        4       |
|---|----------------+

<div class="cont">
  <div class="c1">1</div>
  <div class="l2">2</div>
  <div class="l3">3</div>
  <div class="l4">4</div>
</div>
Tags:

2

Answers


  1. 0

    It is not a task for Flexbox but CSS-Grid which can control 2 directions, unlike Flexbox.

    To have 2 columns where the first column width is depending on the first element and the remaining to occupy the remaining space you can use: grid-template-columns: auto 1fr;.

    To make the first element occupy the entire first column you can use grid-row: span {{number of rows}}. If you do not know the number of rows or other elements then use an insanely high number that would not be reached:

    .cont {
  display: grid;
  grid-template-columns: auto 1fr;
}

.c1 {
  grid-row: span 100;
  width: 200px;
}

/* for visualization purpose only */
.cont > div {
  border: 2px dashed red;
}
    <div class="cont">
  <div class="c1">1</div>
  <div class="l2">2</div>
  <div class="l3">3</div>
  <div class="l4">4</div>
</div>
    Login or Signup to reply.
  2. 0

    As already @tacoshy mentioned this can be done with grid, and you may have a look into my implementation too.

    .cont {
  display: grid;
  grid-template-columns: auto 1fr; 
  width:100px;
  border:1px solid gray
}

.c1 {
  grid-row: 1 / span 4; 
  border:1px solid gray;
  width:30px
}

.l2, .l3, .l4 {
  grid-column: 2;
  border:1px solid gray
}
    <div class="cont">
  <div class="c1">1</div>
  <div class="l2">2</div>
  <div class="l3">3</div>
  <div class="l4">4</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search