'set width contaner to only span content width flex item fixed width and height

how to adjust flex container to only span content width (width of flex items). In this excercise I put 3 flex item (span) in a div container and set width and height for span and expect div to only take up width of 3 span (not whole line). How to adjust so that border only wrap 3 flex item. Please someone show me

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  text-transform: capitalize;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 36px;
  text-transform: uppercase;
  margin-bottom: 55px;
  letter-spacing: 1px;
}

.flex,
.quantity {
  display: flex;
  align-items: center;
}

section {
  overflow-x: auto;
}
section h2 {
  text-transform: capitalize;
  font-size: 24px;
  font-family: "Source Sans Pro", sans-serif;
  margin-bottom: 27px;
  font-weight: 300;
}
section h2 span {
  color: #00bcd4;
}
section table,
section tr,
section th,
section td {
  border: 1px solid #dfe5e8;
  border-collapse: collapse;
}

.quantity {
  border: 1px solid #dfe5e8;
}
.quantity div {
  text-align: center;
  color: #afb9be;
}

.minus,
.plus {
  width: 33px;
  height: 33px;
  background: #dfe5e8;
}
.minus:hover,
.plus:hover {
  cursor: pointer;
}

.item {
  width: 40px;
}

.quantity_col {
  width: 202px;
}
/*# sourceMappingURL=test_flex.css.map */
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;700&family=Source+Sans+Pro:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/test_flex.css" />
  </head>
  <body>
    <section>
      <h2>you have<span> 6 items </span>in your cart</h2>
      <table class="detail">
        <tr class="row">
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus">+</div>
              <div class="item">1</div>
              <div class="plus">-</div>
            </div>
          </td>
        </tr>
      </table>
    </section>
  </body>
</html>
htmlcssflexboxheightwidth


Solution 1:[1]

According to my understanding, you want the borders to cover till the grey - sign box.

Try changing the

.quantity_col {
  width: 202px;
}

and make the width 100%.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SUBHADEEP SANGIRI

Related Questions