Получить div, чтобы взять оставшуюся ширину, но не увеличивать его контейнер при переполнении текста

Question

Есть много связанных тем, но ни одна из них не помогает мне найти решение, которое может быть связано с моей неумелостью, но я не чувствую, что могу провести какие-либо исследования по этому вопросу.

Вthis fiddle: http://jsfiddle.net/L3dozygq/24/

Я пытаюсь получить размер «диалогового окна» в соответствии с основной частью экрана, формой, которую будет содержать красное поле.Красное поле имеет определенный размер с жестко заданным стилем = ширина: и т. Д. Мы хотим, чтобы заголовок диалогового окна занимал только доступное пространство, и мы не хотим, чтобы он расширял диалоговое окно, когда в нем содержится большое количество текста.,Таким образом, красное поле определяет ширину всего диалогового окна, и заголовок должен соответствовать самому размеру в соответствии с этим.

Я пробовал стратегию flexbox, но я был бы доволен решением flexbox или non-flexbox.Тем не менее, я бы хотел избежать float.

Два класса, которые нас интересуют, это flex-контейнер:

.dialogheader

и дочерние элементы

.dialogheadertitle
.dialogheaderrightside

Эти находятся вверхняя часть css в скрипте.

Вам может потребоваться запустить скрипту в новом окне, чтобы доказать, что она работает правильно - добавьте / покажите URL в новом окне, чтобы сделать это.

Answer 1

Добавить эти стили

 div {
  display: inline-block;
}
.dialogheadertitle {
      max-width:790px;
  }
  .dialogheader {
    height: auto;
  }
.dialogheader.draggabledialog {
  display: flex !important; 
}

Проверить обновление скрипка

 
.dialogveil {
  box-sizing: border-box;
  background-color: rgb(100, 100, 100);
  /* for old browsers */
  background-color: rgba(100, 100, 100, 0.7);
  display: none;
  z-index: 1;
  /* bug in IE needs this see stack overflow 40221351 */
}

.dialogcentre {
  /*  exists only to center the div  */
  position: relative;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  min-width: 300px;
  display: inline-block;
}

.dialogbox {
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #111111;
  box-shadow: 2px 2px 40px #222222;
  vertical-align: top;
  /* correcting the alignments set from parent div above */
  text-align: left;
}

.dialogheader {
  background-color: rgb(239, 239, 239);
  background-color: rgba(239, 239, 239, 1);
  border-bottom: 1px solid #111111;
  height: 21px;
  cursor: default;
  display: flex;
  overflow: hidden;
}

.popover .dialogheader {
  border-bottom: 1px solid #aaaaaa;
}

.dialogheadertitle {
  color: #bb2200;
  vertical-align: middle;
  padding: 4px 0px 0px 14px;
  font-size: 9pt;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialogheaderrightside {
  float: right;
  height: 21px;
}

.dialogheadericons {
  width: 47px;
  height: 21px;
  cursor: pointer;
  display: inline-block;
  padding-right: 5px;
  padding-top: 2px;
  position: absolute;
  right: 20px;
}

.dialogheaderclose {
  width: 47px;
  height: 21px;
  cursor: pointer;
  background-color: Red;
  display: inline-block;
  position: absolute;
  right: 1px;
}

.dialogbody {
  padding: 10px 10px 10px 10px;
  /* all except popup */
}
.dialogcentre {
  position: static;
  display: inline-block;
}
div {
  display: inline-block;
}
.dialogheadertitle {
  max-width:790px;
  }
  .dialogheader {
height: auto;
  }
.dialogheader.draggabledialog {
  display: flex !important; 
}

<div class="dialogveil" style="z-index: 101; display: block;">
  <div class="dialog dialogcentre dragparent" style="position: absolute; left: 12px; top: 27px;">
<div class="dialogbox">
  <div class="dialogheader draggabledialog">

    <!-- THIS DIV SHOULD NOT EXPAND THE DIALOG BOX -->

    <div class="dialogheadertitle">Monitor: Dell P190S Monitor 333 Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333Dell P190S Monitor 333</div>
    <div class="dialogheaderrightside">
      <div class="dialogheadericons"></div>
      <div class="dialogheaderclose" title="Close this Window"></div>
    </div>
  </div>
  <div class="dialogbody">
    <div class="form formeditasset">
      <div>
        <div>
          <div>
            <div style="width:790px;height:150px;border:2px solid red;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>