0

I have built a html tab menu.

<section id="container">

<div class="tab">Tab 1</div>
<div class="tab>Tab 2</div>
<div class="tab>Tab 3</div>
<div class="tab>Tab 4</div>
<div id="rest_of_space_v2></div>

</section>

I am trying to use flex to make <div id="rest_of_space_v2></div> fill the remainder of the container.

#container{}
.tab{float: left; padding: 5px;}
#rest_of_space_v2 {float: left; display: flex;  flex-direction: row; border-bottom: 1px solid #ccc;}

I have tried multiple things but I am not understanding the child element of it. The flex element is essentially just a border-bottom: 1px solid #ccc; to continue the border on the tabs.

I am sure it is simple enough but wondered if anyone had any advice.

JackB
  • 53
  • 6
  • The real problem is that I don't understand it. I have watched videos and cannot wrap my head around it. It doesn't fill the remainder of the container. Just a percentage of it. – JackB Jun 24 '21 at 16:06
  • is it possible to talk in chat? – JackB Jun 24 '21 at 16:12
  • you are trying to mix 2 methods `float: left; display: flex;` when `float`is nowdays no longer needed for layout ;) . flex or grid are so efficient and easy that float should be used for its original purpose not layouts. Have fun coding! – G-Cyrillus Jun 24 '21 at 19:07

1 Answers1

1

Remove float:left from #rest_of_space_v2.

Spectric
  • 30,714
  • 6
  • 20
  • 43