debute debute - 2 months ago 7
CSS Question

Set same size for other elements with text cause different sizes

I have a parent element, then 3 children. Center element should be in the center, with 50 px width and other two should take the remaining space. Parent's size is unknown, because of responsive displays. If there is no text in these children, then it looks good, but when I put some text there... well, it is destroyed. Note that I want to make it in the pure CSS.

Problem: red one and blue one should have same width.



.parent {
display: table;
width: 100%;
height: 150px;
border: 1px solid black;
}
.left, .center, .right {
display: table-cell;
height: 150px;
}
.left {
background-color: rgb(199, 60, 60);
}
.center {
width: 50px;
background-color: rgb(60, 199, 96);
}
.right {
background-color: rgb(60, 122, 199);
}

<div class="parent">
<div class="left">Some text</div>
<div class="center"></div>
<div class="right">There is much more text</div>
</div>




Answer

You can use Flexbox and set flex: 1 on left and right div and flex: 0 0 50px on center div.

.parent {
  display: flex;
  height: 150px;
  border: 1px solid black;
}
.left,
.center,
.right {
  height: 150px;
}
.left {
  background-color: rgb(199, 60, 60);
  flex: 1;
}
.center {
  flex: 0 0 50px;
  background-color: rgb(60, 199, 96);
}
.right {
  background-color: rgb(60, 122, 199);
  flex: 1;
}
<div class="parent">
  <div class="left">Some text</div>
  <div class="center"></div>
  <div class="right">There is much more text</div>
</div>