Side by side subitem, grand child of flex container sticks out of area

Question

My goal is to do a "row" with three columns. The layout works but when I add a specific class (which doesn't have width) it makes the grandchild input stick out.

My html is:

    <div class="product-box" >
<div class="flex-container">
  <div class="flex-child">
    <input class="qty-box">     
  </div>
  <div class="flex-child">
    <button type="button" class="qty-add-sub">
      <span class="qty-add">+</span>    
    </button>
  </div>
  <div class="flex-child">
    <button type="button" class="qty-add-sub">
      <span class="qty-minus">-</span>  
    </button>  
  </div>
</div>
    </div>

My css is:

.flex-container {
  display: flex;
  max-width: 180px;
}

.flex-child {
  flex: 1;
}

.product-box {
  display: flex;
  flex-direction: column;
  font-weight: 300;
  width: 200px;
  padding: 10px;
  text-align: center;
  background-color: #c5c5c5;
  border-radius: 5px;

}

input.qty-box {
  border: 2px solid rgb(179, 179, 179);
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
  font-weight: bold;
  font-size: 22px;
  height: 55px;
}

.qty-add {
  color:rgb(84, 0, 0);
  font-size: 30px;
}

.qty-minus {
  color:rgb(84, 0, 0);
  font-size: 30px;
}

The display appears like so:

Sandbox URL: https://codesandbox.io/embed/html-css-forked-eu1680?fontsize=14&hidenavigation=1&theme=dark

The div with the class .flex-container is set at 180px width however the input is set to a particular size which is overflowing it. A possible solution is here https://stackoverflow.com/questions/11748575/default-input-element-size — Adam, Sep 01 '22 at 20:44

score 1 · Answer 1 · answered Sep 01 '22 at 20:37

1

The input default size is 20 characters, and there is not enough space for that

input w3 schools

If you want to resize the input to less characters you can use

<input size="number">

answered Sep 01 '22 at 20:37

Julio Cachay

780
5
10

score 1 · Accepted Answer · answered Sep 01 '22 at 21:17

So I've had a good look at this and there's a few thing to note:

Setting the width of the input box to 100% works but there's still an element that pokes out of the end, this is due to the box-sizing being content-box and not border-box. I've set the flex box so that the first child tries to grow and the buttons don't. I've also set a width for your buttons too. Example below

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  gap:0.125rem;
}

.flex-child {
  flex-grow: 0;
}

.flex-child:first-child {
  flex-grow: 1;
}

.product-box {
  font-weight: 300;
  width: 200px;
  padding: 10px;
  background-color: #c5c5c5;
  border-radius: 5px;
}

input.qty-box {
  border: 2px solid rgb(179, 179, 179);
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
  font-weight: bold;
  font-size: 22px;
  height: 55px;
  width: 100%;
}

.qty-add {
  color: rgb(84, 0, 0);
  font-size: 30px;
}

.qty-minus {
  color: rgb(84, 0, 0);
  font-size: 30px;
}

.qty-add-sub {
  width: 2rem;
}

<div class="product-box">
  <div class="flex-container">
    <div class="flex-child">
      <input class="qty-box" />
    </div>
    <div class="flex-child">
      <button type="button" class="qty-add-sub">
          <span class="qty-add">+</span>
        </button>
    </div>
    <div class="flex-child">
      <button type="button" class="qty-add-sub">
          <span class="qty-minus">-</span>
        </button>
    </div>
  </div>
</div>

Side by side subitem, grand child of flex container sticks out of area

2 Answers2