Stretch inputs to fill div's width?

user_11931062 0
Viewed 112

I have a div that looks like this:

picture with un-stretched inputs

I would like to somehow make the inputs always stretch to the end of the div. The desired result is:

picture with inputs stretched to end of div

It seems from the research I did that adding display: flex and flex-wrap: wrap to the div will be necessary, but I couldn't get it to layout as desired. Any help on how to make the inputs always stretch to the end of the div will be appreciated.

If the input breaks to own line that's fine. I just want it to stretch to the end of the div.

Code snippet to follow -

.square:nth-child(odd) {
  background: rgb(220, 217, 217);
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  column-gap: .5%;
}

.square {
  padding: 4px;
  border: 1px solid red;
}

.square input {

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>

  <div class="container">
    <div class="square one">

      <label for="numSelect">Choose an algorithm:</label>
      <input type="text" id="numSelect">

      <label for="arr">Array:</label>
      <input type="text" id="arr">

    </div>
    <div class="square 2">
      <p>buncha text</p>
    </div>
    <div class="square 3">
      <p>buncha text</p>
    </div>
    <div class="square 4">
      <p>buncha text</p>
    </div>
    <div class="square 5">
      <p>buncha text</p>
    </div>
    <div class="square 6">
      <p>buncha text</p>
    </div>
  </div>

</body>

</html>

css html
2 Answers

Try adding display: flex; flex-flow: column nowrap; to .one like below:

.square:nth-child(odd) {
  background: rgb(220, 217, 217);
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  column-gap: .5%;
}

.square {
  padding: 4px;
  border: 1px solid red;
}

.square input {

}

.one {
  display: flex;
  flex-flow: column nowrap;
}
  <div class="container">
    <div class="square one">

      <label for="numSelect">Choose an algorithm:</label>
      <input type="text" id="numSelect">

      <label for="arr">Array:</label>
      <input type="text" id="arr">

    </div>
    <div class="square 2">
      <p>buncha text</p>
    </div>
    <div class="square 3">
      <p>buncha text</p>
    </div>
    <div class="square 4">
      <p>buncha text</p>
    </div>
    <div class="square 5">
      <p>buncha text</p>
    </div>
    <div class="square 6">
      <p>buncha text</p>
    </div>
  </div>

Or you can wrap the label and input elements in a div, set display: flex on the div, and then set flex-grow: 1 on the input, like this:

.square:nth-child(odd) {
  background: rgb(220, 217, 217);
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  column-gap: .5%;
}

.square {
  padding: 4px;
  border: 1px solid red;
}

.square input {

}
.one div {
  display: flex;
  flex-wrap: wrap;
}
.one div input {
  flex-grow: 1;
}
  <div class="container">
    <div class="square one">

      <div><label for="numSelect">Choose an algorithm:</label>
        <input type="text" id="numSelect"></div>

      <div><label for="arr">Array:</label>
        <input type="text" id="arr"></div>

    </div>
    <div class="square 2">
      <p>buncha text</p>
    </div>
    <div class="square 3">
      <p>buncha text</p>
    </div>
    <div class="square 4">
      <p>buncha text</p>
    </div>
    <div class="square 5">
      <p>buncha text</p>
    </div>
    <div class="square 6">
      <p>buncha text</p>
    </div>
  </div>

(You'll have to go full page to see it on one line.)

user_142422010

A work around could be a pseudo, order and flex-grow:

idea demo :

.square:nth-child(odd) {
  background: rgb(220, 217, 217);
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  column-gap: .5%;
}

.square {
  padding: 4px;
  border: 1px solid red;
}

.square.one {
  display: flex;
  flex-wrap:wrap;
}

.square.one:before {
  content: '';
  min-width: 100%;
  flex: 1;
  order: 1;
  margin:0.5em;
}

.square.one :last-of-type {
  order: 2;
}

.square input {
  flex: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>

  <div class="container">
    <div class="square one">

      <label for="numSelect">Choose an algorithm:</label>
      <input type="text" id="numSelect">

      <label for="arr">Array:</label>
      <input type="text" id="arr">

    </div>
    <div class="square 2">
      <p>buncha text</p>
    </div>
    <div class="square 3">
      <p>buncha text</p>
    </div>
    <div class="square 4">
      <p>buncha text</p>
    </div>
    <div class="square 5">
      <p>buncha text</p>
    </div>
    <div class="square 6">
      <p>buncha text</p>
    </div>
  </div>

</body>

</html>

or

.square:nth-child(odd) {
  background: rgb(220, 217, 217);
}

.container {
  display: grid;
  grid-template-columns: 20em auto auto;
  column-gap: .5%;
}

.square {
  padding: 4px;
  border: 1px solid red;
}

.square.one {
  display: flex;
  flex-wrap:wrap;
}

.square.one:before {
  content: '';
  min-width: 100%;
  flex: 1;
  order: 1;
  margin:0.5em;
}

.square.one :last-of-type {
  order: 2;
}

.square input {
  flex-grow: 1;
  margin:auto  ;
} 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>

  <div class="container">
    <div class="square one">

      <label for="numSelect">Choose an algorithm:</label>
      <input type="text" id="numSelect">

      <label for="arr">Array:</label>
      <input type="text" id="arr">

    </div>
    <div class="square 2">
      <p>buncha text</p>
    </div>
    <div class="square 3">
      <p>buncha text</p>
    </div>
    <div class="square 4">
      <p>buncha text</p>
    </div>
    <div class="square 5">
      <p>buncha text</p>
    </div>
    <div class="square 6">
      <p>buncha text</p>
    </div>
  </div>

</body>

</html>

user_24420990
Related