CODEWITHSUNDEEP
htmlcssflexbox
Abdusoli
Abdusoli

Reputation: 659

Change flexbox child width in a flexible way

I am trying to change the width of flex children in CSS, but my targeted boxes are not changing. In the middle flexbox I only write one number and length also should be smaller. Anyway lengths of three flexboxes are almost same. How can I do that?

.container{
    padding-right: 300px;
}
.row{
display: flex;
margin-top: 30px;

}
.col{
    border:0.5px solid #598BDA;
    padding: 10px;
    margin: 0 15px;
    min-height: 25px;
    outline: none;
}

input{
    text-align: center;
    font-size: 30px;
}

.col-2{
    flex-grow: 2;
}
.col-1{
    flex-grow:1;
}
<div class="container">
    <div class="row">
        <input class="col col-2" id="num1" value="1234567768" />
        <input class="col col-1" id="correct1"  />
        <input class="col col-2" id="summa1" value="333333" />
    </div>
    <div class="row">
        <input class="col col-2" id="num2" value="42354656577" />
        <input class="col col-1" id="correct2"/>
        <input class="col col-2" id="summa2" value="325453443" />
    </div>
    <div class="row">
        <input class="col col-2" id="num3" value="3255656213" />
        <input class="col col-1" id="correct3"/>
        <input class="col col-2" id="summa3" value="23545000" />
    </div>

</div>

Result:

enter image description here

My purpose is to decrease width of middle flexbox. How can I handle this problem?

Upvotes: 0

Views: 4312

Answers (2)

Jannes Carpentier
Jannes Carpentier

Reputation: 1898

In order for flex-grow to work, you need to specify a width. I added width: 0 and now the columns are 2-1-2

NOTE They show smaller here, due to the small screen size (your container class has a padding-right: 300px so there isn't much space left). click on full page to see a proper example

.container {
  padding-right: 300px;
}

.row {
  display: flex;
  margin-top: 30px;
}

.col {
  border: 0.5px solid #598BDA;
  padding: 10px;
  margin: 0 15px;
  min-height: 25px;
  outline: none;
  width: 0; /* add this */
}

input {
  text-align: center;
  font-size: 30px;
}

.col-2 {
  flex-grow: 2;
}

.col-1 {
  flex-grow: 1;
}
<div class="container">
  <div class="row">
    <input class="col col-2" id="num1" value="1234567768" />
    <input min="0" max="9" class="col col-1" id="correct1" />
    <input class="col col-2" id="summa1" value="333333" />
  </div>
  <div class="row">
    <input class="col col-2" id="num2" value="42354656577" />
    <input class="col col-1" id="correct2" />
    <input class="col col-2" id="summa2" value="325453443" />
  </div>
  <div class="row">
    <input class="col col-2" id="num3" value="3255656213" />
    <input class="col col-1" id="correct3" />
    <input class="col col-2" id="summa3" value="23545000" />
  </div>

</div>

Alternatively you could also specify a width in %. The following snippet is equivalent to the previous

.container {
  padding-right: 300px;
}

.row {
  display: flex;
  margin-top: 30px;
}

.col {
  border: 0.5px solid #598BDA;
  padding: 10px;
  margin: 0 15px;
  min-height: 25px;
  outline: none;
}

input {
  text-align: center;
  font-size: 30px;
}

.col-2 {
  width: 40%;
}

.col-1 {
  width: 20%;
}
<div class="container">
  <div class="row">
    <input class="col col-2" id="num1" value="1234567768" />
    <input min="0" max="9" class="col col-1" id="correct1" />
    <input class="col col-2" id="summa1" value="333333" />
  </div>
  <div class="row">
    <input class="col col-2" id="num2" value="42354656577" />
    <input class="col col-1" id="correct2" />
    <input class="col col-2" id="summa2" value="325453443" />
  </div>
  <div class="row">
    <input class="col col-2" id="num3" value="3255656213" />
    <input class="col col-1" id="correct3" />
    <input class="col col-2" id="summa3" value="23545000" />
  </div>

</div>

Upvotes: 1

Ricardo
Ricardo

Reputation: 252

Your solution would have worked if the columns were not inputs, say instead, div elements.

The problem with inputs is that they have a default width to accommodate a number of characters. This width will be calculated using the font-size, this is why changing the font-size of the inputs makes them bigger.

So as Jannes mentions, flex basis does not take effect unless you overwrite the width property. You can also do this by changing the size attribute of the input element.

<input size=2>

The input above would have a width to accommodate two character.

Additionaly, if what you want is for the first and last column to take the rest of the available space you can give them flex-grow: 1 and delete the flex-grow on the central column (defaults to 0).

.col-2  {
  /*flex-grow: 2;*/
  flex-grow: 1;
}

.col-1 {
  /*flex-grow: 1;*/
}

Upvotes: 1

Related Questions