How to make display inline-block only for the two elements inside flex?

user_3961170 0
Viewed 170

I am trying to make two elements as a display inline block element inside the flex container. But it is not working. Following is my html code

<div id="main-container">
    <div id="col1">
    first
    </div>
    <div id="col2">
    second
    </div>
    <div id="col3">
    third
    </div>
    <div id="col4">
    fourth
    </div>
</div>

and my css is

    #main-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
    }

    #col1 {
    background: blue;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;

    }

    #col2 {
    background: yellow;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;
    display:inline-block;
    }

    #col3 {
    background: green;
    flex: 1;
    display:inline-block;
    min-height: inherit;
    }

    #col4 {
    background: indigo;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;

    }

Here I am trying to make only col2 and col3 as a single row. How to make it.? Like below example

----
First
-------------
Second | thrid
--------------
fourth
-----

JSFiddle

Actually I am trying with mat-table and I cannot able to add any div in between two cells. For the demo purpose I made this question with a div tag. I need to merge below red high lighted cells as a single row.

enter image description here

flexbox css html
1 Answers

Your #main-container has flex-direction: column so div's are displayed as columns.

It is necessary to add a container and just apply display: flex for it. By default display: flex has flex-direction: row:

#main-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
}

#col1 {
    background: blue;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;

}

#col2 {
    background: yellow;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;
    display: inline-block;
}

#col3 {
    background: green;
    flex: 1;
    display: inline-block;
    min-height: inherit;
}

#col4 {
    background: indigo;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;

}

.foo {
    display: flex;
}
<div id="main-container">
    <div id="col1">
      first
    </div>
    <div class="foo">
      <div >
        second
      </div>
      <div>
        third
      </div>
    </div>

    <div id="col4">
      fourth
    </div>
  </div>

UPDATE:

If it is not possible to add container, then you can use display: grid with grid-template-areas::

.main-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "col_1 col_1""col_2 col_3""col_4 col_4";
}

.col-1 {
    background-color: lightgreen;
    grid-area: col_1;
}

.col-2 {
    background-color: lightpink;
    grid-area: col_2;
}

.col-3 {
    background-color: orange;
    grid-area: col_3;
}

.col-4 {
    background-color: olivedrab;
    grid-area: col_4;
}
<div class="main-container">
    <div class="col-1">
      first
    </div>
    <div class="col-2">
      second
    </div>
    <div class="col-3">
      third
    </div>
    <div class="col-4">
      fourth
    </div>
  </div>

Read more about grid-template-areas.

user_16462400
Related