The typical solution for this issue is using float, however, it does not work in my situation. I attempted to utilize flexbox and overflow:hidden for the parent element, but unfortunately, it did not resolve the issue.
Currently, I am dealing with three inline-block elements. The width of the center element is determined by the length of the text within it, while the other two are simply used to draw a black line on either side with a specified height. Here's an example:
.headline {
width: 700px;
}
.headline>* {
display: inline-block;
}
.blackline {
background-color: #000;
height: 10px;
}<div class="headline">
<div class="blackline"></div>
<h1>blah blah blah</h1>
<div class="blackline"></div>
</div>The width of the parent element remains constant, but the center element's width is variable.
I aim to achieve a layout like this:
|---blah blah blah---|
ensuring that the <h1> element always stays centered and both <div> elements have the same width, occupying all available space based on the width of <h1> since the number of "blah" occurrences cannot be predetermined.