Display Types Are Overridden By Unknown Source

I have a container that contains three elements: one image and two divs: I want all images to be inline blocks and have specified so in their classes: .first_image { disp

Solution 1:

There is a great discussion already on Stack Overflow on the difference between flex and inline-flex. It is an important read and will help in this discussion.

Basically, inline-flex means the container will be inline, whereas flex means the container will be block-level. Here's the key, in both cases, the children are flex-items. They will behave in a certain way with certain defaults in place to fit the flex model. You have to style them differently, in some ways, than regular block or inline elements.

See the snippet below for an example.

.first_image {
   display: inline-block;
   height: 20px;
   width: 20px;
}
.first_div {
   width: 100%;
   display: inline-block;
}

.first_div_expanding {
  flex: 1;
}
.second_div {
   width: 52px!important;
   height: 40px!important;
   display: inline-block;
   background-color: #3798D4;
}
.container {
    display: inline-flex;
}
.flex-container {
    display: flex;
}

.set-sized-flex-container {
    display: inline-flex;
    width: 75%;
}

<h1>Inline-flex</h1><p>The flex container only takes up as much space as it needs and will not force a new line.</p><divclass='container'><imgsrc="https://via.placeholder.com/20x20"class="first-image"><divclass="first_div">No expansion</div><divclass="second_div"></div></div><hr><h1>Flex</h1><p>The flex container will take the full-width of the screen</p><divclass='flex-container'><imgsrc="https://via.placeholder.com/20x20"class="first-image"><divclass="first_div">I expand full-width</div><divclass="second_div"></div></div><hr><h1>Expanding first_div with Inline-Flex</h1><divclass='set-sized-flex-container'><imgsrc="https://via.placeholder.com/20x20"class="first-image"><divclass="first_div_expanding">I expand to take up remaining space</div><divclass="second_div"></div></div>

Solution 2:

You wrote:

The issue is that 1. displays as flex although it should be inline-flex, 2., 3., and 4. display as block although they should be inline-block... Also, the property is not crossed out, so it doesn't seem to be overridden.

So let's clarify:

• Element #1 (.container) is a flex container. You're saying the problem is that you declared display: inline-flex, but the browser is rendering the element as display: flex.

• Elements #2, #3 and #4 are the in-flow children of #1. This means they are flex items. You're saying the problem is that you've set these items to display: inline-block, but the browser is rendering them as display: block.

---

Okay. Let's cover these two points one-by-one.

Why is display: inline-flex computing to display: flex?

Because that's what the flexbox specification requires.

§ 3. Flex Containers: the flex and inline-flex display values

If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the "Specified Value" column and flex in the "Computed Value" column.

So inline-flex computes to flex in certain situations, as described in the table linked to in the excerpt above. That's what is happening in your code. Technically, it is not an override, which is why you're not seeing inline-flex crossed out.

---

Why is display: inline-block computing to display: block on flex items?

Again, because that's what the flexbox specification requires.

§ 4. Flex Items

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

Also note that you cannot control the display value of flex items. Once you make an element a flex container, the display property on flex items is controlled by the flex algorithm. Attempts to set a display rule on flex items are ignored by the browser. That's what you're seeing in your code: display: inline-block is being ignored (but, again, technically not overridden, which is why inline-block is not crossed out).