CSS: Override parent's inline style width to adjust to child width

Question

I usually set parent's .text-container display to inline-block to align the width with the child .text . Here I have an additional problem: parents width is hardcoded as element.style. How do I override the inline style AND adjust to child width at the same time? I can only use CSS.

https://jsfiddle.net/xc7ybt31/

HTML

 .text {
  display: inline;
}
.text-container {
  display: inline-block;
  float:left;
}
.main-container {
  display: inline-block;
}

<div class="main-container">
  <div class="text-container" style="width:100px">
    <div class="text">
      text
    </div>
  </div>
</div>

do you want to apply the same 100px for child element or what is your expected result? — Suresh Ponnukalai, May 19 '17 at 08:37
Hardcoded styles are processed last by browsers, so you'r likely to get stuck with this style. However, you could put an !important statement to override .text-container's width in your css file but neither hardcoding nor !important statements are best practices. — Pierre Burton, May 19 '17 at 08:38

score 4 · Accepted Answer · answered May 19 '17 at 08:37

4

Try this code

set width:auto!important;

.text-container {
    display: inline-block;
    float: left;
    width: auto !important;
}

.text {
  display: inline;
}
.text-container {
  display: inline-block;
  float:left;
  width: auto !important;
}
.main-container {
  display: inline-block;
}

<div class="main-container">
  <div class="text-container" style="width:100px">
    <div class="text">
      text
    </div>
  </div>
</div>

answered May 19 '17 at 08:37

Amal

3,398
1
12
20

That did the trick - combo of auto width and inline-block works in my example. Thanks! – Zenon May 19 '17 at 08:47

score 3 · Answer 2 · answered May 19 '17 at 08:38

3

It depends on the specifity of your style declaration, but you can only override inline style with the !important declaration in your stylesheet.

answered May 19 '17 at 08:38

RWAM

6,760
3
32
45

score 3 · Answer 3 · answered May 19 '17 at 08:42

Try important switch in style.

https://jsfiddle.net/ogud9tmj/

.text {
  display: inline-block;
  width: 100%;
  border: 1px solid black;
}
.text-container {
  display: inline-block;
  float:left;
  width: 300px !important;
  border: 1px solid red;
}
.main-container {
  display: inline-block;
  border: 1px solid green;
}

score -2 · Answer 4 · answered May 19 '17 at 08:39

-2

Modify your css as follow:

.text {
      display: inline-block;
      width: 100%;
      background-color: green;
    }

You can modify inline style width to whatever value so .text will always be adjusted according to parent inline width that you specified

.text {
  display: inline-block;
  width: 100%;
  background-color: green;
}
.text-container {
  display: inline-block;
  float:left;
  background-color: yellow;
}
.main-container {
  display: inline-block;
}

<div class="main-container">
  <div class="text-container" style="width:100px">
    <div class="text">
      text
    </div>
  </div>
</div>

answered May 19 '17 at 08:39

hoangfin

667
7
16

Please specify reason you mark down my answer, my answer fulfills OP's requirement to adjust child according to parent's width so why you marked it down ? – hoangfin May 19 '17 at 08:44
OP wants the parent div to adjust according to its child, not the inverse. The parent div, which is too wide (and hardcoded), has to be the same size as his smaller child. – Pierre Burton May 19 '17 at 08:58
I thought he wanted to modify inline width of parent and let child adjusts in accordance with whatever width value specified automatically – hoangfin May 19 '17 at 09:01
`How do I override the inline style AND adjust to child width at the same time?` – hoangfin May 19 '17 at 09:02
Still, your answer overrides nothing, just stick the child's witdh to 100% of its parents' (which stays only 100px in every situation) – Pierre Burton May 19 '17 at 09:04
you can specify width value to whatever value you like and child element will adjusts accordingly. For example later he wants to change from 100px to 200px then child element will grow to fit parent. – hoangfin May 19 '17 at 09:08

CSS: Override parent's inline style width to adjust to child width

4 Answers4