Dynamic CSS width

Question

So, I have this div container that spans across the page (please see the picture).

<div class="container">
  <div class="A">Content length changes</div>
  <div class="B">Width dependent on "A"</div>
  <div class="C">fixed 27px width</div>
  <div class="D">fixed 27px width</div>
</div>

The issue is that the width of "A" is dynamic and it changes which means "B" width also changes (Although "B" will have minimum width of 27px).

I can measure the width of the "A" and change the css using jQuery but I want to know if there is a way to handle the width variables for "A" and "B" simply using CSS.

you mean min-width? change it to 'width'. Please provide fiddle — Anonymous Duck
– Anonymous Duck, Commented May 18, 2016 at 5:15
You can probably solve this pretty cleanly using Flexbox CSS properties like flex-grow or flex-shrink. — TylerH
– TylerH, Commented May 18, 2016 at 5:23

Jinu Kurian · Accepted Answer · 2016-05-18 05:34:26Z

2

Here is how I did using flexbox

div {
  border: 3px solid;
}
.child {
  padding: 10px;
  margin: 10px;
  background-color: #eee;
}
.container {
  padding: 10px;
  background-color: yellow;
  display: -webkit-flex;
  display: flex;
}
.child.one {
  -webkit-flex: 5 1 200px;
  flex: 5 1 200px;
  color: green;
}
.child.two {
  -webkit-flex: 1 3 200px;
  flex: 1 3 200px;
  color: purple;
}
.child.three,
.child.four {
  width: 50px;
}

<div class="container">
  <div class="child one">
    Child One
    <br>Lorem ipsum
    <br>dolor sit amet
    <br>This is a bit longer line
  </div>

  <div class="child two">
    Two
  </div>

  <div class="child three">
    Three
  </div>

  <div class="child four">
    Four
  </div>
</div>

answered May 18, 2016 at 5:34

Jinu Kurian

9,5263 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TylerH Over a year ago

Why are you including -webkit- prefixes on flex? Chrome hasn't used prefixes for flex in over twenty major versions.

Gleb Kemarsky · Accepted Answer · 2016-05-18 06:25:44Z

1

I have a solution without any flex. Simple CSS only.

.A {
  float:left;
}
.B {
  overflow: hidden;
}
.C, .D {
  float: right;
  width: 27px;
  min-width: 27px;
}

/* beautiful appearance */
.container {
  border: 4px solid #999;
  padding: 8px;
}
.A, .B, .C, .D {
  padding: 4px 8px;
}
.A { background: #ff6; }
.B { background: #69f; }
.C { background: #f60; }
.D { background: #6c6; }

<div class="container">
  <div class="D">D</div>
  <div class="C">C</div>
  <div class="A">A. Content length changes</div>
  <div class="B">B. Dependent on "A"</div>
</div>

http://jsfiddle.net/glebkema/Lf5fw9e6/

UPD. I've added a border to the container for clarity.

edited May 18, 2016 at 6:25

answered May 18, 2016 at 5:53

Gleb Kemarsky

10.5k7 gold badges49 silver badges73 bronze badges

2 Comments

HEYHEY Over a year ago

This is pretty clever! Thanks! =D

Gleb Kemarsky Over a year ago

@HEYHEY I am glad to be helpful. I've added a border to the container for clarity.

Collectives™ on Stack Overflow

Dynamic CSS width

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related