HEYHEY HEYHEY - 6 months ago 20
HTML Question

Dynamic CSS width

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>


enter image description here

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.

Answer

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>