How to have make a div take a minumum of 50% space but if no sibling is present take 100%-CodePudding

Simply put I have:

#Container {
display:'flex';
flex-wrap:'wrap';
}

.item {
flex-basis: '50%'
}

Scenario one:

<div id=Container>
  <div class="item"></div> 33 %
  <div class="item"></div> 33 %
  <div class="item"></div> 33%
</div>

Scenario 2

<div id=Container>
  <div class="item"></div> 50 %
  <div class="item"></div> 50 %
</div>

scenario 3:

<div id=Container>
  <div class="item"></div> 100 %
</div>

What I want in general tems is this to be fluid, the more items I put in the less space each item will have but if there is only 1 then I want it to take full space.

CodePudding user response：

First you have to add display: flex; to #Container

#Container{
  display: flex;
}

If you want to equally distribute the space between children then you can use flex property as

.item{
  flex: 1;
}

Above CSS is minimum required styles, rest is for demo

#Container {
  display: flex;
  margin-top: 1rem;
}

.item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.item:nth-child(1) {
  background-color: red;
}

.item:nth-child(2) {
  background-color: blueviolet;
}

.item:nth-child(3) {
  background-color: aquamarine;
}

<div id="Container">
  <div class="item">33 %</div>
  <div class="item">33 %</div>
  <div class="item">33 %</div>
</div>

<div id=Container>
  <div class="item"> 50 % </div>
  <div class="item"> 50 % </div>
</div>

<div id=Container>
  <div class="item">100 %</div>
</div>

CodePudding user response：

I think that this example could give you an idea of how to achieve what you want: https://codepen.io/Eylen/pen/vYJBpMQ

.Container {
 display: flex;
 flex-wrap: wrap;
  margin-bottom: 8px;
}

.item {
  flex-grow: 1;
  margin: 0 12px;
  background: #f1f1f1;
}

Your main issue in the code that you gave, is that you're missing the flex item behaviour. I have just set that the item can grow to fill the space with the flex-grow:1.

CodePudding user response：

You can make sure a flex child covers up the space if it can, you can provide flex-grow: 1

#Container {
  display:flex;
}

.item {
  width: 100%;
  flex-grow: 1;
  border: 1px solid;
  text-align: center;
}

<h1> Scenario 1 </h1>
<div id=Container>
  <div class="item">33 %</div> 
  <div class="item">33 %</div> 
  <div class="item">33%</div> 
</div>


<h1> Scenario 2 </h1>
<div id=Container>
  <div class="item">50 %</div> 
  <div class="item">50 %</div> 
</div>


<h1> Scenario 3 </h1>
<div id=Container>
  <div class="item">100 %</div> 
</div>

CodePudding user response：

You can use styled-components which make component styling more code like. With that, if you have some variable or prop you can choose per situation (with or without sibling) what percentage to set:

Import styled from 'styled-components'
...
...
...
const Button = styled.button`
  flex-basis: ${(100 / React.Children.count(children))   '%'} ;
`;

CodePudding user response：

Added a demo below.

$( document ).ready(function() {
  $( "#add" ).click(function() {
    $('#container').append('<div class="item"></div>');
  });
   $( "#remove" ).click(function() {
    $('#container').children().last().remove();
  });
});

#container {
  width:100%;
  height:500px;
  background-color:#ebebeb;
  display:flex;
  flex-direction: column;
}

.item {
  width:100%;
  display: flex;
  flex: 1;
  border-bottom:1px solid #007cbe;
}
.item1 {
  background:#007cbe;
}
.item2 {
  background: #d60000;
}
.item3 {
  background: #938412
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div> 
  <div class="item item3">3</div> 
</div>

<button id="add"> Add </div>
<button id="remove"> Remove </div>

CodePudding user response：

Apply to the below CSS to fulfill your requirement.

#Container {
    display: flex;
}

.item {
    width: 100%;
    min-height: 100px;
    border: 1px solid;
}