html - How to make inline-block elements to grow vertically -


I have two inline block elements (the first image) first fixed a width. The second does not have fixed width because the container can grow horizontally, so it should be filled.

When the second element is bigger (second image) then it wraps down.

But what do I need to do is to grow the element (third image) vertically.

I also need text to protect line breaks.

First of all: small text, second: what happens, third: what i want

you max-width: calc (100% - LABEL_WIDTH) Can apply to .element class. Change the label's width to LABEL_WIDTH. In this way you can define the width for labels instead of using two percent values.

See this JSFiddle for a work example:

Support calc () For a table of browsers see this link:

  li {Display: inline -block; Vertical-alignment: top; List-style-type: none; } .label {width: 7em; } .element {width: calc (100% - 7em); White-space: pre-line; }    

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -