How can I set "fill_parent" value as an element's width?

Question

First of all I have to say this seems an identical question with mine. But it isn't.

I have this HTML:

.parent{
  border: 1px solid gray;
  width: 70%;
}

.title{
  border: 1px solid green;
}

.input {
  /* width: fill_parent; */
}

<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید">
</div>

All I need is setting a value which means something like fill_parent as that input's width. As you see, the width of that .parent is based on percentage, so it will be changed when the size of screen changes. That's why I cannot use a value based on px as .input's width.

Note: .input{width: 100%;} isn't what I'm looking for, because I need to keep both the title and input in the same line.

Any suggestion?

Bootstrap has some good functionality for this, take a look at their column system, otherwise you cant do much better then going 20% on the title and 80% on the input or something like that — namlik, Sep 20 '16 at 16:09

score 1 · Accepted Answer · answered Sep 20 '16 at 16:05

You can put display:flex; on your parent and then flex:1; on your input.

.parent{
  border: 1px solid gray;
  width: 70%;
  display:flex;
}

.title{
  border: 1px solid green;
}

.input {
  flex:1;
}

<div class="parent">
  <span class="title">title: </span>
  <input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید">
</div>

How can I set "fill_parent" value as an element's width?

1 Answers1