Make a flex item act like display block [duplicate]

Question

So I have a container which uses display flex, then 4 divs inside which the first one needs to act like it is used display block and the 3 others need to be as they are.

Code snippet demonstration :

#container {
  display: flex;
}

#menu {
  display: flex;
}

#menu p {
  margin: 0;
  padding: 8px;
  padding-bottom: 0;
}

.otherDivs {
  height: 700px;
  width: 10%;
  background-color: grey;
  margin-right: 5px;
}

<div id="container">

  <div id="menu">

    <p>Btn</p>
    <p>Btn</p>
    <p>Btn</p>

  </div>

  <div class="otherDivs"></div>
  <div class="otherDivs"></div>
  <div class="otherDivs"></div>

</div>

How do I get the menu to display above those other divs?

I know I could just put the menu div out of the container but I need to keep it within the container where it is because I am using it with Jquery tabs.

Answer 1

You should add a flex-basis: 100% to #menu, and allow the gray items to go to a new line by applying flex-wrap: wrap; to #container:

#container {
  display: flex;
  flex-wrap: wrap;
}

#menu {
  display: flex;
  flex-basis: 100%;
}

#menu p {
  margin: 0;
  padding: 8px;
  padding-bottom: 0;
}

.otherDivs {
  height: 700px;
  width: 10%;
  background-color: grey;
  margin-right: 5px;
}

<div id="container">

  <div id="menu">

    <p>Btn</p>
    <p>Btn</p>
    <p>Btn</p>

  </div>

  <div class="otherDivs"></div>
  <div class="otherDivs"></div>
  <div class="otherDivs"></div>

</div>

Answer 2

If the goal is to make a flex item occupy an entire row, then set it to flex-basis: 100%, and enable wrap on the container. This causes the full width item to force subsequent items to the next line.

#container {
  display: flex;
  flex-wrap: wrap;   /* NEW */
}

#menu {
  flex: 0 0 100%;    /* NEW */
  display: flex;
}

#menu p {
  margin: 0;
  padding: 8px;
  padding-bottom: 0;
}

.otherDivs {
  height: 700px;
  width: 10%;
  background-color: grey;
  margin-right: 5px;
}

<div id="container">
  <div id="menu">
    <p>Btn</p>
    <p>Btn</p>
    <p>Btn</p>
  </div>
  <div class="otherDivs"></div>
  <div class="otherDivs"></div>
  <div class="otherDivs"></div>
</div>