flexbox - Tab Using Pure CSS Flex Concept -


how separate flex item flex container , make block width 100% using css without positioning?

my html structure:

<div class="container">   <div style="display:flex;">     <div>tab</div>     <div class="block-container">content</div>   </div> </div> 

expected result

the rule need add flex-wrap: wrap;. once add .container, making .block-container 100% wide forces new line, away .tab.

.container {    display:flex;     flex-wrap: wrap;  }    .tab, .block-container {    padding: 1em;    border: 1px solid #ccc;    text-align: center;  }    .tab {    border-bottom: 1px solid white;    position: relative;    top: 1px;  }    .block-container {    flex: 0 0 100%;  }
<div class="container">    <div class="tab">tab</div>    <div class="block-container">content</div>  </div>


Comments

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -