Stretch inputs to fill div's width?

Question

I have a div that looks like this:

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

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>

Does this answer your question? [How to make a div fill a remaining horizontal space?](https://stackoverflow.com/questions/1032914/how-to-make-a-div-fill-a-remaining-horizontal-space) (obviously replace `div` with `input` but you will get the idea....) — Martin, Sep 23 '20 at 22:27
[**This answer**](https://stackoverflow.com/a/25117686/3536236) should help you — Martin, Sep 23 '20 at 22:30
You state: "If the input breaks to own line that's fine. I just want it to stretch to the end of the div." so the solution can be : `input[type='text']{ display:inline-block;min-width:100%; }` . Simple. — Martin, Sep 23 '20 at 22:32
Thanks @Martin. That linked answer does work when I add `flex-wrap: wrap;` and setting the text width using percentage. — Tzvi2, Sep 23 '20 at 23:54

ajarrow · Accepted Answer · 2020-09-23T22:48:32.957

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.)

This doesn't seem to do what the OP is trying to achieve, here the text is above the input rather than being on the same line as the input. — Martin, Sep 23 '20 at 22:27
@Martin Quoting OP: ```If the input breaks to own line that's fine. I just want it to stretch to the end of the div.``` — ajarrow, Sep 23 '20 at 22:29
I think the OP isn't quite sure what they actually want; this can easily be achieved with `min-width:100%` or similar on the input element. — Martin, Sep 23 '20 at 22:31
Sorry about my ambiguity. I'd wanted the text to be on the same line as input, and only if the window goes below a certain size (will specify later) will the inputs move below to their own line. At any point above that min size, id like the text to be next to the input, and for the input to stretch to the end of the div. (to look like second picture in op) @ajarrow your second solution is exactly what i'm looking for. — Tzvi2, Sep 23 '20 at 23:50

G-Cyrillus · Answer 2 · 2020-09-23T22:40:23.377

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>

Stretch inputs to fill div's width?

2 Answers2